Replacing TinyMCE with WMD in your Mango Blog.mdown

Replacing TinyMCE with WMD (Markdown) in your MangoBlog

Mango Blog future plans include a way to add custom editors in a manner that is simple and compartmentalized, but this is not yet realized. Therefore, in order to accomplish this goal today, we must edit a few files. Don't worry, it's not difficult and there aren't that many to do.

Of course there are two pieces to this puzzle. First, you have to put a Markdown editor in your blog (directions to follow); then you need a plugin to convert that Markdown into HTML at display-time. I've written a plugin called Salsa to do that.

Step 0: Add assets

Download wmd-Mango.zip. Unzip it into {Mango}/admin/assets/editors/ so that the directory structure follows:

admin/
  assets/
    editors/
      wmd/
        showdown.js
        wmd.js
        wmd.css
        images/
          wmd-buttons.png

Step 1: /admin/editorSettings.cfm

BACK THIS FILE UP! Personally, I prefer the method of copying it to editorSettings.cfm.orig.

Now, open editorSettings.cfm and erase all of its contents (don't worry, you've got it backed up!), and replace them with this:

<link rel="stylesheet" type="text/css" href="assets/editors/wmd/wmd.css" />
<script type="text/javascript" src="assets/editors/wmd/showdown.js"></script>
<script type="text/javascript">
	wmd_options = {
        	output: "markdown"
	};
	//dummy object to prevent TinyMCE errors
	tinyMCE = {};
	tinyMCE.triggerSave = function() {
		//do nothing
	}
</script>

Save and close.

Step 2: /admin/postForm.cfm

BACK THIS FILE UP! Personally, I prefer the method of copying it to postForm.cfm.orig.

You will need to make changes in 2 different sections of this page.

First, starting at or around line 22, find this section of code:

<cfif listfind(showFields,'content')>
	<p>
		<label for="contentField">Content</label>
		<span class="field"><textarea cols="50" rows="20" id="contentField" name="content" class="htmlEditor required">#htmleditformat(content)#</textarea></span>
	</p>
<cfelse>

Replace that with this code:

<cfif listfind(showFields,'content')>
	<p>
		<label for="wmd-input">Content</label>
		<div id="wmd-editor" class="wmd-panel">
			<div id="wmd-button-bar"></div>
			<textarea id="wmd-input" class="required" name="content">#htmlEditFormat(content)#</textarea>
		</div>
		<div id="wmd-preview" class="wmd-panel"></div>
	</p>
<cfelse>

Second, go to the very end of the file, which should end with </form></cfoutput>. Add the following code after </form></cfoutput>:

<script type="text/javascript" src="assets/editors/wmd/wmd.js"></script>

Step 3: /admin/pageForm.cfm

Repeat Step 2 for admin/pageForm.cfm (be sure to backup as pageForm.cfm.orig!)