Display code blocks

Support Extras
17

To fix this I just leached into TinyMCE’s code editor. If you want an element that is ONLY a code sample you can create a new Tiny RTE Config in Fred called “code” and put the following values in:

{
  "theme": "inlite",
  "inline": true,
  "plugins": "code",
  "selection_toolbar": "code",
  "extended_valid_elements": "fixedpre"
}

Then you just need to assign that RTE Config to your element:

<pre data-fred-name="code" data-fred-rte="true" data-fred-rte-config="code">
 <fixedpre>Put code here</fixedpre>
</pre>

Now you can just hit Tiny’s code editor to insert actual code.

image
image279×133 3.31 KB

If you want to include fixedpre and a code editor in your regular TinyMCE config, you can create an RTE Config called “TinyMCE” and give it the following value:

{
  "theme": "inlite",
  "inline": true,
  "plugins": "modxlink image imagetools media lists contextmenu code codesample",
  "insert_toolbar": "image media quicktable modxlink codesample",
  "selection_toolbar": "bold italic underline codesample | alignleft aligncenter alignright | bullist numlist | modxlink h2 h3 h4 blockquote | code",
  "image_advtab": true,
  "imagetools_toolbar": "alignleft aligncenter alignright | rotateleft rotateright | flipv fliph | editimage imageoptions",
  "extended_valid_elements": "fixedpre",
  "auto_focus": false,
  "branding": false,
  "relative_urls": false,
  "image_dimensions": false,
  "force_br_newlines": true,
  "remove_linebreaks": false,
  "codesample_languages": [
    {
      "text": "HTML/XML",
      "value": "markup"
    },
    {
      "text": "JavaScript",
      "value": "javascript"
    },
    {
      "text": "CSS",
      "value": "css"
    },
    {
      "text": "PHP",
      "value": "php"
    }
  ]
}
2 Likes