Jump to content

Tuturial - Add extended Code/html editor to TinyMCE

Recommended Posts

Hi guys.

This is a simply 2 step process, very fast and easy. 

I have been searching for an better way to edit the code with the TinyMCE editor and decided to go all in today and add a code plugin to the TinyMCE editor.

Only tested on PS 1.6.x

The TinyMCE wysiwyg editor comes with a very basic HTML source editor.This plugin for TinyMCE makes editing HTML source code a more pleasant experience. It is based on the excellent CodeMirror code editor, developed by Marijn Haverbeke. This plugin offers the following functionality:


  • Syntax highlighting of HTML, Javascript and PHP code
  • Line numbers
  • Highlighting the line currently being edited
  • Automatic indentation
  • Many undo/redo levels
  • Search/Replace functionality
  • Etc. etc.


Ok so here we go.


Step 1

Go to this github link and download the latest resp.https://github.com/christiaan/tinymce-codemirror

1. Unpack the content to a folder on your HD. 

    You should have some folders in this way:
        + plugins

           |+  codemirror

                | + codemirror-4.x (or higher)

                | + langs


Go into "langs" folder and check if your language is there. If not just copy en.js and change the name of that to your countrycode. (if you want to translate just edit that file)


2. Change the name of the folder called "codemirror-4.x"   to only "codemirror"


3. Upload the content of the plugins folder to your TinyMce plugins folder on your server. Should be located here:


4. now you should have a folder in your /js/tiny_mce/plugins/ folder that is simply called "codemirror".

in that folder there should be 2 folders and some files like this.

|+ codemirror

|+ langs

|- plugin.js

|- plugin.min.js

|- source.html


Step 2

Now its time to edit the settings file of your tinyMCE editor. "tinymce.inc.js"

For me the settings file is located here: /js/admin/tinymce.inc.js

1. Open up that file and there you should have some code that looks something like this:

default_config = {
        selector: ".rte" ,
        plugins : "visualblocks, preview searchreplace print insertdatetime, hr charmap colorpicker anchor code link image paste pagebreak table contextmenu filemanager table code media autoresize textcolor emoticons improvedcode",
        toolbar2 : "newdocument,print,|,bold,italic,underline,|,strikethrough,superscript,subscript,|,forecolor,colorpicker,backcolor,|,bullist,numlist,outdent,indent",
        toolbar1 : "styleselect,|,formatselect,|,fontselect,|,fontsizeselect,",
        toolbar3 : "code,|,table,|,cut,copy,paste,searchreplace,|,blockquote,|,undo,redo,|,link,unlink,anchor,|,image,emoticons,media,|,inserttime,|,preview ",
        toolbar4 : "visualblocks,|,charmap,|,hr,|,improvedcode", 

Remember your file might differ from this but the basics should be the same.  

2. So now in that file you should in the variable "plugins" change the word "code" to "codemirror" you should see it between "table" and "media" . Just change the word "code" to "codemirror". 
Ps: there is another "code" word in the toolbar variables, Dont touch that, only change the "code" in the plugins row.


3. directly below the "toolbar4" row add a new row with this code below:

codemirror: {
            indentOnInit: true, // Whether or not to indent code on init.
            fullscreen: false,   // Default setting is false
            path: 'codemirror', // Path to CodeMirror distribution
            config: {           // CodeMirror config object
                mode: 'application/x-httpd-php',
                lineNumbers: true
            width: 800,         // Default value is 800
            height: 600,        // Default value is 550
            jsFiles: [          // Additional JS files to load

Be sure to take a backup of your file and then save it.

Go into your admin and edit a product. Be sure to clear your cache using CTRL+F5 and sometime you need to go into settings and clear the cache in your browser settings to be able to see the changes.


now you should have a much greater source editor with nice looking colors and linenumbers. :)


I would also strongly recomend following VEIKA´s tuturial on extending the editor even more before adding this plugin. Also buying his plugin for even more extensions is recommended. 

Extend your editor for free:

A great and cheep module to extend it even further.



Im planing on adding some more plugins to the editor, and remember be sure to backup any files that you are editing. i take no responsibility for your mistakes. :)


Happy editing. :) i know my life got Little bit better with this plugin anyway. :)



Sveriges bästa e-cigg ifall du vill sluta röka.

  • Like 2

Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More