SyntaxHighlighter Plugin for Tiny_mce WYSIWYG editor

Edited: 31/05/2011 16:14:00

Since this blog is predominately code related I needed a decent Syntax highlighter. I also needed a decent WYSIWYG (what you see is what you get) editor for writing these blog posts. After some research I chose to use Tiny_mce as my WYSIWYG and SyntaxHighlighter for syntax highlighting, but in order to get the two to play nicely together I had to create a tiny_mce plugin.

When it came to integrating SyntaxHighlighter with tiny_mce I found there wasn't much written in the blogosphere. I eventually stumbled upon this post by Nawaf which included a plugin for tiny_mce.

Unfortunately, Nawaf's plugin was built for an older version of SH which uses textareas to hightlight.

     function  Save_Button_onclick() {
	 var lang = document.getElementById("ProgrammingLangauges").value;
	 var code =  WrapCode(lang);
	 code = code + document.getElementById("CodeArea").value;
	 code = code + "</textarea> "
     if (document.getElementById("CodeArea").value == ''){
		tinyMCEPopup.close();
		return false;
	}
	tinyMCEPopup.execCommand('mceInsertContent', false, code);
	tinyMCEPopup.close();
    }
    
    function  WrapCode(lang)
    {
       var options = "";
       if (document.getElementById("nogutter").checked == true)
       options = ":nogutter";
       
       if (document.getElementById("collapse").checked == true)
       options = options + ":collapse";
              
       if (document.getElementById("nocontrols").checked == true)
       options = options + ":nocontrols";
              
       if (document.getElementById("showcolumns").checked == true)
       options = options + ":showcolumns";
       
        return "<textarea name='code' class='"+lang+options+"' cols='50' rows='20'>";
    }

    function Cancel_Button_onclick()
    {
    	    tinyMCEPopup.close();
    	    return false;
    }

To get round this I modified Nawaf's original code.

function Save_Button_onclick() {
    var lang = document.getElementById("ProgrammingLangauges").value;
    var code = "<div class='CodeBlock'>";
    code = code + "<pre class='brush: " + lang + "'>";
    code = code + document.getElementById("CodeArea").value;
    code = code + "</pre>";
    code = code + "</div>";
    if (document.getElementById("CodeArea").value == '') {
        tinyMCEPopup.close();
        return false;
    }
    tinyMCEPopup.execCommand('mceInsertContent', false, code);
    tinyMCEPopup.close();
}

My modified plugin works fine for most languages.

The major advantage I found of using tiny_mce over other WYSIWYG editors is that it has a very very good algorithm for cleaning up your html which is easily configurable.

Unfortunately in this instance tiny_mce was too good at cleaning up my code, this meant that whenever I tried to insert a HTML code block, tiny_mce thought that any html inside of a pre tag was bad practice and removed the offending pre tags.

To get around this I used a opensource javascript encoder.

function Save_Button_onclick() {
    var lang = document.getElementById("ProgrammingLangauges").value;
    var code = "<div class='CodeBlock'>";
        code = code + "<pre class='brush: " + lang + "'>";
        code = code + Encoder.htmlEncode(document.getElementById("CodeArea").value);
        code = code + "</pre>";
    code = code + "</div>";
    if (document.getElementById("CodeArea").value == '') {
        tinyMCEPopup.close();
        return false;
    }
    tinyMCEPopup.execCommand('mceInsertContent', false, code);
    tinyMCEPopup.close();
}

The encoder takes the code block and HTML encodes the characters so < becomes < and > becomes >.

Using the codehighlighter plugin for tiny_mce I can now write posts with code snippets in easily.

Comments | 2 | Post views | 1704 | Tags | javascript tiny_mce |