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   1516 Views

Avatar
knsqnt

Community Member, 85 Posts

28 January 2013 at 12:57am

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

Community Member, 19 Posts

13 April 2014 at 12:33am

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

Community Member, 19 Posts

15 April 2014 at 4:44am

Edited: 15/04/2014 4:44am

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
knsqnt

Community Member, 85 Posts

16 April 2014 at 8:45pm

Thank you! I'll definitely try this!

Avatar
novaweb

Community Member, 115 Posts

15 August 2014 at 10:22am

BigMoose,

Did you get this working in SilverStripe 3?

Cheers,
Josh