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. Also enables more than just HTML editing enabling Markdown Editing or any source code editing.) 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