At last! ACE code view for FRED RTE elements!

Development
1

I was finally able to get a long wanted feature working today on my Fred RTE elements - fancy ACE source code view mode.

I was able to get this work in the latest version of Fred TinyMCE RTE, using a TinyMCE plugin I found on github.

  1. download the plugin code from here: GitHub - melquibrito/source-code-editor-tinymce-plugin: Tinymce advanced custom plugin for editing source code.

  2. create a directory somewhere on your site to hold this plugin. I added it under “assets/components/fredrtetinymce/codeeditor/” and added the the “plugin.js” file from the download above to this folder. You don’t need both plugin.js and plugin.min.js - and you probably will want to edit the spanish language defaults in the plugin.js ->> “Cancelar” for example :slight_smile:

  3. Assuming you already have an RTE config for your Fred setup, you want to add the following to it:

"external_plugins": {
    "codeeditor": "/assets/components/fredrtetinymce/codeeditor/plugin.js"
  },
"plugins": "advlist autolink lists link image charmap anchor searchreplace visualblocks code fullscreen insertdatetime media table wordcount codeeditor",
  "selection_toolbar": "undo redo | blocks | bold italic forecolor backcolor | image | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | codeeditor",

Adding “codeeditor” to the plugins and selection_toolbar are the key things here - the rest is just my other plugins and such. I would have preferred to add this codeeditor to the contextmenu options, but I could not get it to appear there. If you know how, share back here!

If I have explained it right, and you have done it right, then you will see a new code edit button on the selection toolbar:

image
image1435×331 32.7 KB

and clicking it will get you:

image
image1244×750 33 KB

I’m getting a few wierd rendering issues in these screenshots, but it’s otherwise working with code formatting.

There is another “Supercode” plugin ( GitHub - prathamVaidya/supercode-tinymce-plugin: Opensource and Powerful Source Code editor for TinyMCE. It is the only tinyMCE plugin that allows TinyMCE to work as a Markdown Editor.) that is newer and expands on the plugin used here - but it currently does not work in “inline” mode of tinymce - which we definitely need with Fred. I have put in a request from supercode’s author to add support for inline.

2 Likes