CodeMirror for TinyMCE 4

I am looking for someone(s) who wants to take over maintenance and development of CodeMirror for TinyMCE. It needs to go on Github, and it needs TLC. I simply don’t have the time anymore. Who wants to take over?
Drop me a line at arjan@webegar.nl, thanks!

The TinyMCE wysiwyg editor comes with a very basic HTML source editor. I’ve implemented a plugin for TinyMCE that makes editing HTML source code a more pleasant experience. This plugin 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.

Here is an example:


Version 1.4 (2014-12-15)

  • Bugfix: Replace setLine call to replaceRange (for CodeMirror 4 compatibility). This fixes � appearing in the source code.
  • Note: This TinyMCE plugin requires CodeMirror version 4 (3 is no longer supported)

Version 1.3 (2014-03-04)

  • Bugfix: If any text was highlighted in CodeMirror and the code dialog is closed and saved, the selected text was removed from TinyMCE. This has now been fixed.
  • Macintosh users now see Macintosh keyboard shortcuts.

Version 1.2 (2013-09-04)

  • When you close the CodeMirror popup window, the cursor position will be maintained; the cursor in TinyMCE will be moved to wherever it was in CodeMirror. This only works when the cursor is inside a text-node (not in a <tag>) in CodeMirror.
  • When the code in CodeMirror becomes “dirty”, TinyMCE will be notified about it (made dirty as well).

Version 1.1 (2013-07-19)

  • This version introduces new jsFiles and cssFiles config options.

Instructions

  1. Download and install TinyMCE 4 and make sure it runs correctly with default settings.
  2. Download the source files for the CodeMirror plugin (codemirror-1.4.zip or codemirror-1.4.tar.gz).
  3. Unpack the downloaded file in the tinymce/plugins directory. A folder named codemirror will be created.
  4. Download CodeMirror (version 4 or later) from http://codemirror.net/codemirror-latest.zip.
  5. Unpack codemirror-latest.zip inside the plugins/codemirror folder that was just created. A folder named codemirror-4.8 (or similar) will be created.
  6. Activate the codemirror plugin in TinyMCE:
    plugins: ['codemirror']
  7. Optionally, add the code button to TinyMCE’s toolbar:
    toolbar: 'undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | code'
  8. Test: You should see a Source code item in the Tools menu. Click it to edit the HTML source code.

Additional configuration options

You can modify the behaviour of the codemirror plugin, by adding a codemirror object to the TinyMCE configuration.

indentOnInit boolean CodeMirror automatically indents code. With the indentOnInit option, you tell the Source Code editor to indent all code when the editor opens. This might be slow for large documents.
Default: false
path string You might already have CodeMirror hosted on your server elsewhere (outside TinyMCE). In that case, you can reuse that CodeMirror instance, by overriding the default path. For example:

path: 'http://www.mysite.com/tools/codemirror-4.8'

Default: codemirror

config Object CodeMirror configuration object, which is passed on to the CodeMirror instance. Check http://codemirror.net/doc/manual.html for available configuration options.
jsFiles Array Array of CodeMirror Javascript files you want to (additionally) load. For example:

jsFiles: [
   'mode/clike/clike.js',
   'mode/php/php.js'
]

The following Javascript files are always loaded: lib/codemirror.js, addon/edit/matchbrackets.js, mode/xml/xml.js, mode/javascript/javascript.js, mode/css/css.js, mode/htmlmixed/htmlmixed.js, addon/dialog/dialog.js, addon/search/searchcursor.js, addon/search/search.js, addon/selection/active-line.js.

cssFiles Array Array of CodeMirror CSS files yoy want to (additionally) load. For example:

cssFiles: [
   'theme/neat.css',
   'theme/elegant.css'
]

The following CSS files are always loaded: lib/codemirror.css, addon/dialog/dialog.css.

For example:

tinymce.init({
  selector: '#html',
  plugins: 'codemirror',
  toolbar: 'undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | code',
  codemirror: {
    indentOnInit: true, // Whether or not to indent code on init. 
    path: 'CodeMirror', // Path to CodeMirror distribution
    config: {           // CodeMirror config object
       mode: 'application/x-httpd-php',
       lineNumbers: false
    },
    jsFiles: [          // Additional JS files to load
       'mode/clike/clike.js',
       'mode/php/php.js'
    ]
  }
});

Compatibility

This TinyMCE plugin is compatible with pretty much all browsers out there, including Firefox, Google Chrome, Safari and Internet Explorer, version 8 or better. It is NOT compatible with Interner Explorer 6 or 7, simply because CodeMirror itself does not work in these versions. Don’t ask me to support Internet Explorer 6 or 7, it won’t happen.

Sponsor

The CodeMirror for TinyMCE plugin is sponsored by webpower.
webpower

16 thoughts on “CodeMirror for TinyMCE 4

  1. OK I figured it out and realized that it has to be uploaded to a server to work. but the OK button is not working for me. it shows my code highlighted, and I can make changes to the code, but I can’t save. any idea what would cause that?

  2. Nice!,

    I will try this plugin!

    Keep up the good work.

  3. When I type PHP code it is translated to:

    This is not correct.

  4. For years I’ve looked for a simple implementation of HTML code formatting. CodeMirror looked to be the one..but this plugin is the BOMB! Thanks! Gave me exactly what I was looking for!

  5. Very nice plugin! One question. How can I trigger the onchange event in TinyMCE, when I change someting in CodeMirror?

    Thank you again for the plug.

  6. Congrats on the plugin ! I haven’t used it yet, but the demo looks really great ! More kudos for sharing !!
    Regards

  7. There is a MAJOR bug with this plugin currently – if any text is highlighted in the HTML source code (i.e. in CodeMirror) when the code dialog is closed and saved, that text gets completely removed from TinyMCE!


  8. Adam:

    There is a MAJOR bug with this plugin currently – if any text is highlighted in the HTML source code (i.e. in CodeMirror) when the code dialog is closed and saved, that text gets completely removed from TinyMCE!

    This bug has been fixed in the 1.3 release. Thanks for reporting!

  9. Great plugin… makes the tinymce source editor actually usable! Is there any way to make the source editor resizable though? It feels pretty confined on my 1080p screen.

  10. Resizable although not dynamic. I tried using tinymce css to do this but the level of class reuse does not scale well for this. This will set your editor to a nice big area but if it’s too large just adjust 1.1 and 1.2 to something like 1.5. In plugin.min.js

    width: window.parent.window.innerWidth/1.1,
    height: window.parent.window.innerHeight/1.2,

    Also, I rewrote some things to allow the theme selector to run with this. In source.html in the head script:
    cssFiles: [
    ‘lib/codemirror.css’,
    ‘addon/dialog/dialog.css’,
    ‘theme/3024-day.css’,
    ‘theme/3024-night.css’,
    ‘theme/ambiance.css’,
    ‘theme/base16-dark.css’,
    ‘theme/base16-light.css’,
    ‘theme/blackboard.css’,
    ‘theme/cobalt.css’,
    ‘theme/colorforth.css’,
    ‘theme/eclipse.css’,
    ‘theme/elegant.css’,
    ‘theme/erlang-dark.css’,
    ‘theme/lesser-dark.css’,
    ‘theme/mbo.css’,
    ‘theme/mdn-like.css’,
    ‘theme/midnight.css’,
    ‘theme/monokai.css’,
    ‘theme/neat.css’,
    ‘theme/neo.css’,
    ‘theme/night.css’,
    ‘theme/paraiso-dark.css’,
    ‘theme/paraiso-light.css’,
    ‘theme/pastel-on-dark.css’,
    ‘theme/rubyblue.css’,
    ‘theme/solarized.css’,
    ‘theme/the-matrix.css’,
    ‘theme/tomorrow-night-bright.css’,
    ‘theme/tomorrow-night-eighties.css’,
    ‘theme/twilight.css’,
    ‘theme/vibrant-ink.css’,
    ‘theme/xq-dark.css’,
    ‘theme/xq-light.css’,
    ‘theme/zenburn.css’
    ],

    var sel = parent.document.querySelectorAll(‘.mce-window-head’)[0],
    div = parent.document.createElement(‘div’);
    div.innerHTML = ” + ‘3024-day’ + ‘3024-night’ + ‘ambiance’ + ‘base16-dark’ + ‘base16-light’ + ‘blackboard’ + ‘cobalt’ + ‘colorforth’ + ‘eclipse’ + ‘elegant’ + ‘erlang-dark’ + ‘lesser-dark’ + ‘liquibyte’ + ‘mbo’ + ‘mdn-like’ + ‘midnight’ + ‘monokai’ + ‘neat’ + ‘neo’ + ‘night’ + ‘paraiso-dark’ + ‘paraiso-light’ + ‘pastel-on-dark’ + ‘rubyblue’ + ‘solarized dark’ + ‘solarized light’ + ‘the-matrix’ + ‘tomorrow-night-bright’ + ‘tomorrow-night-eighties’ + ‘twilight’ + ‘vibrant-ink’ + ‘xq-dark’ + ‘xq-light’ + ‘zenburn’ + ”;
    div.style.position = ‘absolute’;
    div.style.right = ‘265px’;
    div.style.top = ‘-4px’;
    sel.appendChild(div);

    In the body tags:

    window.parent.selectTheme = function() {
    var input = window.parent.document.getElementById(“select”);
    var theme = input.options[input.selectedIndex].innerHTML;
    this.codemirror.setOption(“theme”, theme);
    };

    The first part sets a select box with the themes in the titlebar (you’ll have to edit your css to position it), the last script changes the theme. You’ll also have to write your own cookie code to save it if you need to.

  11. Hello, Arjan!
    Can you add RU language to codemirror plugin?
    I add ru.js file like this:
    tinymce.addI18n(‘ru’,{
    ‘HTML source code’: ‘\u0418\u0441\u0445\u043e\u0434\u043d\u044b\u0439 HTML \u043a\u043e\u0434’,
    ‘Start search’: ‘\u041d\u0430\u0447\u0430\u0442\u044c \u043f\u043e\u0438\u0441\u043a’,
    ‘Find next’: ‘\u041d\u0430\u0439\u0442\u0438 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439’,
    ‘Find previous’: ‘\u041d\u0430\u0439\u0442\u0438 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u0439’,
    ‘Replace’: ‘\u0417\u0430\u043c\u0435\u043d\u0438\u0442\u044c’,
    ‘Replace all’: ‘\u0417\u0430\u043c\u0435\u043d\u0438\u0442\u044c \u0432\u0441\u0435’
    });
    You can download it from here:
    http://imagency.org/ru.zip
    Thank you for plugin!

Leave a Reply

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

*
*
Website