Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

Customising the CMS

TinyMCE with syntax highlighting


Reply

5 Posts   1195 Views

Avatar
theGermaniac

28 January 2013 at 12:57am Community Member, 82 Posts

Hi there,

what's the beste way to add syntax highlighting to the CMS' HtmlEditorField TinyMCS source editor?

I tried to add this TinyMCE plugin https://github.com/RichGuk/syntaxhl but it simply does not work...

Any help appreciated :-)

Cheers, Mario

Avatar
BigMoose

13 April 2014 at 12:33am Community Member, 19 Posts

Just wondering if you were ever able to solve this. On the SS 2.x versions, there was some syntax color showing when I would view the html source code in the TinyMCE editor. With versions 3.x this is no longer there.

Avatar
BigMoose

15 April 2014 at 4:44am (Last edited: 15 April 2014 4:44am), Community Member, 19 Posts

Okay, I found a great solution for me. First, I think a better plugin than "syntaxhl" is called "codemagic".
[url]https://github.com/tinymce-plugins/codemagic[/url]

After downloading, I renamed the file from 'codemagic-master' to 'codemagic'. I then placed this folder into:
framework/thirdparty/tinymce/plugins/

Next, I added the following line into mysite/_config.php

HtmlEditorConfig::get('cms')->enablePlugins('codemagic');

Lastly, I needed to add the button to the TinyMCE button layout - ensuring that 'codemagic' was listed. This too was added to the mysite/_config.php file.

HtmlEditorConfig::get('cms')->setButtonsForLine(1, 'undo', 'redo', 'bold', 'italic', 'underline', 'strikethrough', '|', 'justifyleft', 'justifycenter', 'justifyright', 'justifyfull', '|', 'styleselect', 'formatselect', 'fontselect', 'fontsizeselect', '|', 'forecolor', 'backcolor', 'styleprops');

HtmlEditorConfig::get('cms')->setButtonsForLine(2, 'codemagic', 'fullscreen', '|', 'cut', 'copy', 'paste', 'pastetext', 'pasteword', 'spellchecker', '|', 'bullist', 'numlist', '|', 'outdent', 'indent', 'blockquote', '|', 'image', 'link', 'unlink', 'anchor', '|', 'selectall', 'visualaid', '|', 'removeformat', 'hr', 'charmap');

I really hope this helps the others who were looking for an answer to this problem.

Avatar
theGermaniac

16 April 2014 at 8:45pm Community Member, 82 Posts

Thank you! I'll definitely try this!

Avatar
novaweb

15 August 2014 at 10:22am Community Member, 115 Posts

BigMoose,

Did you get this working in SilverStripe 3?

Cheers,
Josh