TinyMCE is delivered without a source coloured. It's poor edit the html without the source highlighted. In order to highlight the surce code I found 2 plugins for TinyMCE: codemirror and codemagic. Let me explain how to add the plugin "codemagic" on your Joomla.
WHAT IS CODEMAGIC
CodeMagic is an advanced source code editor plugin for Tinymce. It integrates the CodeMirror library for syntax coloring, and the JSBeautifier library for code formating and indentation.
COMMENTS
I installed it on Joomla 3.02 and 2.8 but I think it can also works in other versions.
I was really difficult find a clear guide for Joomla and understand how add and configure the plugin.
STEPS
Well, here what you need.
- Download the codemagic plugin
- Upload on your Joomla folder
- Change the settings for TinyMCE plugin in your Joomla installation
DOWNLOAD
UPLOAD
- Unzip the file codemagic-master.zip. I suggest to rename the folder from codemagic-master to codemagic.
- Using a client ftp, upload it on YourJoomlaFolder/media/editors/tinymce/jscripts/tiny_mce/plugins
updated dec 7, 2013 - for Joomla 3.20 path changed:
YourJoomlaFolder//media/editors/tinymce/plugins/codemagic
You also need a copy of plugin.min.js...
copy from
YourJoomlaFolder/media/editors/tinymce/plugins/example/plugin.min.js
to
YourJoomlaFolder/media/editors/tinymce/plugins/codemagic/plugin.min.js - updated dec 27, 2013 - for Joomla 3.20 TinyMCE is version 4.x and codemagic is not compatible with version 4.x
Read here for official reply from codemagic support
JOOMLA SETTINGS
- Open the TinyMCE plugins setting:
Externsions->Plugins Manager->TinyMCE Editor->Advanced parameters and search for Custom plugin and Button.
Custom plugin: codemagic
Custom button: codemagic
Open your TinyMCE Editor and you will find a new icon "HTML".
That's all!
I hope it will works only for you.
USEFUL IMAGES
REFERENCES
- TinyMCE
- Code Magic
- Code Mirror (alternative to Code Magic)
- have fun -