ImprovedCode, a new plug-in for TinyMCE

In my work is widely used the web editor TinyMCE (http://www.tinymce.com), and I was asked, if possible, the editor could display the HTML source code, but properly indented with tags highlighted in different colours. I looked for plug-ins in the Internet for this editor to do exactly what they asked me, but I found none that fit exactly to our needs, so I started to develop it myself based on the one that already exists in the editor and using CodeMirror (http://codemirror.net) to highlight the source code. Thus was born my plugin for TinyMCE: ImprovedCode.

Download

You can download the plug-in ImprovedCode via GitHub: https://github.com/aguvillalba/improvedcode.

It is licensed under LGPL v3 (http://www.gnu.org/copyleft/lesser.html), so you are totally free to modify the code and include the plug-in any TinyMCE editor.

Installation

To install the plug-in ImprovedCode in your TinyMCE editor, you simply have to follow these 3 simple steps:

  1. Extract the .zip file in the plugins folder of your editor TinyMCE
  2. In the configuration section, where you insert your editor, add “improvedcode” to the list of plugins
  3. Add “improvedcode” in the toolbar where you want that the plug-in button (which triggers the plug-in) is displayed. Usually called “theme_advanced_buttonsN” where “N” is the number of the toolbar in question.
  4. Make sure that the theme of your TinyMCE editor is in “advanced” mode. You can check this option of setting up your editor, in the same code where you insert in your HTML:
tinyMCE.init({ 
        // General options 
        mode : "specific_textareas", 
        editor_selector: "mceEditor", 
        theme : "advanced", 
        plugins : "..., improvedcode, ...",
        theme_advanced_buttons1 : "..., improvedcode, ..."
});

Configuration

The plug-in provides several configuration options, allowing to fit better to your needs. As its name suggests, these are just configuration settings, so it is not mandatory to set any of them for the correct operation of the plug-in. These options are:

  • height: <int>, integer value that sets the initial height must have the editor. Default: 580 (px).
  • indentUnit: <int>, integer value that sets the number of tabs that must exist between a father and a son block block. Default: 1
  • tabSize: <int>, integer value that determines how many spaces up a tab. Default: 4.
  • lineWrapping: <bool>, Boolean value (true or false) that determines whether to adjust the lines to the editor. Default: true.
  • lineNumbers: <bool>, Boolean value (true or false) that determines whether to display the line numbers in the left margin. Default: true.
  • autoIndent: <bool>, Boolean value (true or false) that determines if they are indented lines editor when it starts. Default: true.
  • optionsBar: <bool>, Boolean value (true or false) that determines whether to load checkboxes bar at the top of the editor. Default: true.
  • theme: <string>, Name aesthetic theme that has to apply to the editor. Default: default. This is the list of possible themes to be applied:
    • ambiance
    • ambiance-mobile
    • blackboard
    • cobalt
    • eclipse
    • elegant
    • erlang-dark
    • lesser-dark
    • monokai
    • neat
    • night
    • rubyblue
    • solarized
    • twilight
    • vibrant-link
    • xq-dark
    • xq-light

More Information

For more information take a look to the “README” file included in the plug-in itself.

Collaborate

If you find any malfunction or in the plug-in source code, or if you have any idea or you need to add more functionality to the plug-in, please do not hesitate to contact me on my contact form.

How to include ImprovedCode into Joomla?

To add the plug-in in Joomla you just have to follow these steps:

  1. Unzip the latest version of the plug-in in the following directory: Joomla_installation_dir/media/editors/tinymce/jscripts/tiny_mce/plugins/
  2. Once unzipped, make sure the plugin directory is readable by the web server (chmod 755).
  3. Access to your administration area in Joomla and go to Extensions -> Plugin Manager -> Editor – TinyMCE
  4. In “Basic Options” make sure the functionality is in “Extended”.
  5. In the block “Extended parameters”, at the end, in the “Custom Plugin” field, add “improvedcode”.
  6. Add “improvedcode” in the field “Custom Button”.
  7. Save the changes.

With these steps, you should have available the “HTML+” button which launches the HTML editor ImprovedCode.

2 thoughts on “ImprovedCode, a new plug-in for TinyMCE

Leave a Reply

Your email address will not be published. Required fields are marked *