Hiding the Dojo rich text editor and modifying its contents

The Dojo toolkit provides a very useful rich text editor, which enables you to do WYSIWYG text editing in the browser. However, while integrating it into an application I came across a problem when I tried to load it into a hidden <div> tag, which would be made visible later.Simply put, it’s not currently possible. If you create an Editor2 widget inside a non-visible DOM node it will not function (note that this is done using the latest nightlybuild of Dojo, as of 12th August 2006). Luckily, the solution was already explained in the mailing lists, and it is this:

Instead of putting the Editor inside a hidden div, like

<div id=”parentNode” style=”display:none”>

<div dojoType=”Editor2″> This is the content</div>

</div>

Leave the parentNode visible, and place it offscreen, like

<div id=”parentNode” style=”left:-1000px; top:-1000px”>

….

and when you want to make it visible, do something like:

dojo.byId(“parentNode”).style.left = “100px”;

dojo.byId(“parentNode”).style.top = “100px”;

Of course, you don’t have to position it absolutely, but you get the idea.

The second issue I came across is that of programmatically modifying the contents of the Editor. Each time the editor becomes visible (or in this case is moved into the viewable area of the screen) I wanted to replace the contents with that of an existing blog posting, which could then be modified. There exists a method on the widget called replaceEditorContent, which is supposed to do exactly what it says on the tin – replace the contents. However, while this worked just fine in Firefox, when I tried it in IE 6.0 the entire contents of the page hosting the widget were replaced, not just the content of the Iframe that the editor uses to do the editing. Knowing the Dojo guys, this could very wellbe fixed by the time you’re reading this, but if not, read on! (update: I’ve filed a defect for this here) The solution to this problem is to dynamically create the editor each time you want to display it, and destroy it when you are finished with it. For example, given the DOM node:

<div id=”postContainer” style=”left:-1000px; top:-1000px”></div>the following function will create a new <div> tag inside “postContainer”, and create an Editor2 widget inside that tag, with the widgetId “w_richText”. It then moves the “d_postContainer” div node into the visible screen area.

function showPostPanel(content)
{

var parentNode = dojo.byId(‘d_postContainer’);
//create a new div node that the editor will exist in. This will be created and deleted

//each time the editor is shown/hidden

var widgetNode = document.createElement(‘div’);

parentNode.appendChild(widgetNode);

widgetNode.innerHTML = content ? content : “Enter your post here<br><br><br><br>”;

var widget = dojo.widget.createWidget(“Editor2″, {
id: ‘w_richText’,
htmlEditing: true
},
widgetNode

);

var enclosingNode = dojo.byId(‘d_newPost’);
enclosingNode.style.left = “100px”;
enclosingNode.style.top = “100px”;
}

Hopefully this is of some help.

update: You’ve got to love open source I filed a bug against the replaceEditorContent bug on Saturday morning (this morning) and a few hours later it’s fixed. No such thing as waiting until Monday. Thanks to liucougar for the fix.

About these ads