Fred Editor Tip - Adding View Source to Selection Toolbar

[TRON8888]

For any newbies to Fred, I hope this might save some time. I have a client that has a need to insert a Google Map for their meetings. They are in no way technical and why I love the Fred interface. Makes things so easy for clients like this.

Trying to keep them out of the main MODX backend as much as possible, I tried to create an element with an options setting where they could paste the Google Map < iframe> code, but I could not get it to paste as HTML. It always displayed the code as text on the page.

My solution was to put in the editor ‘Source Code’ option and now I can teach them what to edit and replace. May seem obvious to some and for me I think the source code edit option should be a setting to enable as required.

Carefully edit the fredrtetinymce.js file (see image for the path) by adding ‘code’ to your plugins list then place it in the selection_toolbar with " | code" wherever you want it to appear in the toolbar. I put mine at the end.

Hope this helps someone.

[inside-creative]

Try using

{% autoescape %}
    {{ map_code|raw }} 
{% endautoescape %}

this should allow the HTML to be past unescaped.

also, "type":"text/html" isn’t a valid setting. The TYPE attribute needs to be one of the follow:

• text
• textarea
• select
• toggle
• colorswatch
• colorpicker
• slider
• page
• file
• folder
• image
• tagger

Hope that helps

[inside-creative]

Also, forgot to mention. You don’t need to edit the Tiny MCE JS files, as these will be overwritten when you update FRED. Instead, create a new RTE Config, if you want the RTE Config to be default name it TinyMCE. See this GIST for an example of creating your own RTE Config: https://gist.github.com/NatemcM/21c29df5a9154ef3e34c98ed22594d13