Code Mirror add-on for TinyMCE 4

Code Mirror plugin for TinyMCE
Code Mirror screenshot
Code Mirror screenshot

The TinyMCE wysiwyg editor comes with a very basic HTML source editor. It works, but doesn't offer many features. Plugin for TinyMCE makes editing HTML source code a more pleasant experience. This plugin is based on the excellent CodeMirror code editor, developed by Marijn Haverbeke.


  • 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

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 Internet Explorer 6 or 7, simply because CodeMirror itself does not work in these versions.

Get more info on Code Mirror home page:

TinyMCE 4 logoTinyMCE 4 compatible

Code Mirror add-on installation

  1. Copy codemirror directory to tinymce/plugins/.
  2. Edit TinyMCE config and add codemirror to plugins key.
  3. Add buttons to the toolbar section: code
  4. Enjoy!

Refer to TinyMCE add-ons installation manual for more details