CodeMirror logo

CodeMirror add-on for TinyMCE 5

CodeMirror plugin for TinyMCE
CodeMirror screenshot
CodeMirror screenshot
CodeMirror logo

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 CodeMirror home page:

TinyMCE 4 logoTinyMCE 4 compatible
TinyMCE 4 logoTinyMCE 5 compatible
Add in builder

Embedded to N1ED add-on


CodeMirror add-on installation

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

Refer to TinyMCE add-ons installation manual for more details