Dojo and TinyMCE – Creating a Widget

I’m working on a project using Dojo which requires a wysiwyg editor that is more robust than Dojo’s Dijit.Editor. After doing a bit of research, I decided to use TinyMCE.  This wysiwyg editor is very robust, has great documentation and is the editor that WordPress uses. Integrating TinyMCE did not appear to be difficult, but I also wanted to create a TinyMCE Dojo widget, so that I could easily reuse TinyMCE in other Dojo projects without having to remember how to set it up.

The Dojo widget that I created is based upon an implementation that I found on Disgruntleddevs.wordpress.com, but I changed the widget to make it more flexible – and I also don’t use a template (templatePath , templateString) with the widget because I did understand why it was needed. Also, while researching how to create a Dojo widget, I found a great article by Peter Higgins entitled, “What is a _Widget“.

Widget Location

When working on a project, I generally place all dojo files in a js/ or lib/ folder. I also have a folder named “mywidgets” which is a sibling to the dojo/ folder.  All of the widgets that I create are placed inside this folder. In this case, I created a widget named RichEditor.js and placed it in the “mywidgets” folder.

Loading Dojo and TinyMCE

When loading dojo, I have to set modulePaths for the widget in the djConfig attribute. The path of widget is relative to the location of the dojo.js file.

<script type="text/javascript" src="js/dojo/dojo.js" djConfig="parseOnLoad: true, modulePaths:{'im':'../mywidgets'}" </script><!-- script -->
<script type="text/javascript" src="js/tiny_mce/tiny_mce.js" </script><!-- script -->

Now I load the widget:

<script type="text/javascript">
dojo.require("im.imRichEditor");
</script>

In the body of the html file, I created a textarea that is to be used for the tinyMCE editor:

<div id="tEditor">
<textarea id="tAreas" cols="80" rows="20" name="tAreas" /><!-- div -->
</div>

The Editor Widget

The imRichEditor widget is instantiated in the dojo.addOnLoad function. The widget is set up by default to display tinyMCE’s “Advanced” theme (all the bells and whistles), so to use it, I can simply:

dojo.addOnLoad(function() {
     var ta = new im.imRichEditor({editorNode: "tAreas"}, 'tEditor');
});

The “editorNode” is the id of the textarea and the ‘tEditor’ is the container. All of the options of the Advanced theme can be changed. For instance, the skin_variant option is set to “silver” by default. If I want to use the TinyMCE’s default “blue” skin:

var ta = new im.imRichEditor({editorNode: "tAreas", skin_variant:""}, 'tEditor');

Or Black:

var ta = new im.imRichEditor({editorNode: "tAreas", skin_variant:"black"}, 'tEditor');

If I want the editor to use a specific CSS file:

var ta = new im.imRichEditor({editorNode: "tAreas", skin_variant:"", content_css:"squeeze/styles.css"}, 'tEditor');

I can also change which buttons display in the editor and where. For instance, if I only want to display save, new document, bold, italic, underline, and strike through on the first row of buttons (advanced_buttons1):

var b1 = "save,newdocument,|,bold,italic,underline,strikethrough";
var ta = new im.imRichEditor({editorNode: "tAreas", advanced_buttons1: b1}, 'tEditor');

I can also change the toolbar location. The default value is “top”:

var ta = new im.imRichEditor({editorNode: "tAreas", toolbar_location: "bottom"}, 'tEditor');

If I want to use the TinyMCE “simple” theme:

var ta = new im.imRichEditor({editorNode: "tAreas", theme: "simple"}, 'tEditor');

The default toolbar location for the “simple” theme is on the bottom (set by TinyMCE, not sure why). To create the “simple” editor with the toolbar located on the top:

var ta = new im.RichEditor({editorNode: "tAreas", theme: "simple", toolbar_location:"top"}, 'tEditor');

I can also set an initial value for the editor:

var txt = '<h2 id="headerText">This is my Header Text</h2>';
var ta = new im.imRichEditor({editorNode: "tAreas", skin_variant:"", content_css:"squeeze/styles.css", value: txt}, 'tEditor');

To retrieve the content of the editor, I use the getValue() method:

console.log(ta.getValue());

As you can see, the imRichEditor widget is quite flexible and much more robust than Dojo’s text editor. You can download the widget from Google Code. Click here to view the demo.