Hacker's ramblings

My favorite JavaScript-library Dojo has a very nice HTML-editor. During a project I even enhanced it a bit. Anyway the Dojo/Dijit-documentation is not the best in the world, so I'll demonstrate the three operating modes that are available. All of them have the same functionality, but how they appear visually to the person doing the HTML-editing differs.

Classic fixed size

This is the vanilla operating mode. From the beginning of time, a HTML <TEXTAREA> has been like this (without any formatting, of course). A fixed block-container of multi-line text editor which will scroll on overflow.

Example:

HTML for declarative instantiation:

<div id="terms-Editor" data-dojo-type="dijit.Editor"
    height="150px"
    data-dojo-props="extraPlugins:['insertanchor','viewsource']">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

There is really nothing special, I'm just using two extra plugins insertanchor and viewsource to produce two new icons to the editor toolbar to add functionality for the end user. I found out that the plugins really need to be all lower-case for them to load properly. The class-names and filenames are in CamelCase, but putting them like that makes loading fail.

The obvious thing is that the editor is 150 pixels high. I didn't set the width, but since the editor is a simple div, any size can be set.

Auto-expanding

This is a plugin expansion for the previous. The only real difference is that this type of editor does not overflow. Ever. It keeps auto-expanding to any possible size to be able to display the entire text at once. During testing I found out that the auto-resize -code does not work on all browsers. There seems to be a discrepancy of exactly one line on for example Chrome. The bug manifests itself when you try to edit the last line, pretty much nothing is visible there. I didn't fix the bug, as I concluded that I won't be using this mode at all.

HTML for declarative instantiation:

<div id="terms-Editor" data-dojo-type="dijit.Editor"
    height="" minHeight="100px"
    data-dojo-props="extraPlugins:['alwaysshowtoolbar','insertanchor','viewsource']">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

This has three things to be taken into notice:

1. The auto-expansion is achieved by plugin called alwaysshowtoolbar. It does not work in current Dojo version of 1.9.1, I had to fix it. See the patch at the end of this post.
2. It is absolutely critical to set the height="". Forget that and the alwaysshowtoolbar-plugin does not work.
3. It is advisable to set a minimum height, in my example I'm using 100 pixels. The editor will be really slim, if there is no text. This sets the size into something visually appealing.

Manually resizable

This is how a <TEXTAREA> behaves on many modern browsers. When using plugin statusbar you'll get a handle to resize the block. During testing I found out that it is a bad idea to allow the user to be able to make the editor wider. I enhanced the class with additional parameter which gets passed to plugin's constructor to limit the ResizeHandle functionality.

Example:

HTML for declarative instantiation:

<div id="terms-Editor" data-dojo-type="dijit.Editor"
    height="200px"
    data-dojo-props="extraPlugins:[{name:'statusbar',resizeAxis:'y'},'insertanchor','viewsource']">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

Note that specifying the resizeAxis won't work in your code. If you really want the code I can e-mail it to you, it is longish enough for me not to post it here. The height is 200 pixels initially, but user can make the editor any size.

Hope this helps to clarify the complexity of this fine editor. It would be also nice if a filed bug report would be processed in Dojo-project. Also their discussion in Google Groups is closed, the group is set to moderate any posts, but there is nobody doing that. So, effectively new people cannot post. There is nothing left, but to complain in a blog.

Appendix 1:AlwaysShowToolbar.js patch to fix the plugin-loading

--- dojo/dijit/_editor/plugins/AlwaysShowToolbar.js.orig    2013-07-19 13:21:17.000000000 +0300
+++ dojo/dijit/_editor/plugins/AlwaysShowToolbar.js    2013-08-02 17:31:44.384216198 +0300
@@ -13,7 +13,7 @@
     // module:
     //        dijit/_editor/plugins/AlwaysShowToolbar

-    return declare("dijit._editor.plugins.AlwaysShowToolbar", _Plugin, {
+    var AlwaysShowToolbar = declare("dijit._editor.plugins.AlwaysShowToolbar", _Plugin, {
         // summary:
         //        This plugin is required for Editors in auto-expand mode.
         //        It handles the auto-expansion as the user adds/deletes text,
@@ -198,4 +198,11 @@
         }
     });

+    // Register this plugin.
+    // For back-compat accept "alwaysshowtoolbar" (all lowercase) too, remove in 2.0
+    _Plugin.registry["alwaysshowtoolbar"] = _Plugin.registry["alwaysshowtoolbar"] = function(args){
+        return new AlwaysShowToolbar();
+    };
+
+    return AlwaysShowToolbar;
 });