SOS

Shane O'Sullivan's technical blog… really ties the room together

Hiding the Dojo rich text editor and modifying its contents

Posted by Shane O'Sullivan on August 12, 2006

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.

7 Responses to “Hiding the Dojo rich text editor and modifying its contents”

  1. Acoustic Guitars lowden

    I am Karin, very interesting article that contained the information I was searching for in Google, thanks.

  2. Navin said

    One alternative solution for the hiding of a editor is to use the following classes to hide and show the div:

    .show {
    visibility: visible;
    position: static;
    }

    .hide {
    visibility: hidden;
    position: absolute;
    }

    This way, even if screen resolution increases in future, we are safe (as we are not depending of an absolute value of “left” & “top”

  3. Alixe said

    I have done the trick destroying/creating editor in order to replace content on the fly with javascript.

    I have a strange bug thougho_O

    When the editor is loaded, I can’t delete anything! I need to insert a caracter (i.e pressing any key) before I can delete ?!?

    Anybody had this problem before?

    The editor is in a hidden div that becomes visible and load the editor. Everything works fine except that I can’t start with a deletiono_O I need to add one caracter to be able to delete.

  4. yogesh said

    The editor problem, i solved it this way :

    1. I put a surrounding div tag to the editor with an attribute “parseWidgets = false” to tell dojo not to parse any widget inside this div tag.

    2. Put some content in the editor div using dojo.byId(“myeditor”).innerHTML = “text”

    3. Create the widget using the dojo.widget.byId(dojo.byId(“myeditor”)).

    It works.

  5. prenotazione albergo firenze

    news

  6. I found that when I called dojo.byId(“myeditor”).replaceEditorContent it failed, but if I used the “widget” byId than it worked, i.e. dojo.widget.byId(“myeditor”).replaceEditorContent

  7. Yes, this makes sense.

    dojo.byId(‘myeditor’) returns a reference to a DOM node with the id ‘myeditor’, whereas dojo.widget.byId(‘myeditor’) returns a reference to the actual widget.

    The DOM node does not have a function called ‘replaceEditorContent’ whereas the widget does.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: