Google Translate

Stella inattivaStella inattivaStella inattivaStella inattivaStella inattiva
 

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.

  1. Download the codemagic plugin
  2. Upload on your Joomla folder
  3. 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 

  • CodeMagic 01 Folder
    CodeMagic 01 Folder
  • CodeMagic 02 Joomla Plugin Settings
    CodeMagic 02 Joomla Plugin Settings
  • CodeMagic 03 Joomla TinyMCE Icon
    CodeMagic 03 Joomla TinyMCE Icon
  • CodeMagic 04 Joomla TinyMCE Editor
    CodeMagic 04 Joomla TinyMCE Editor

 

REFERENCES

 

- have fun -