Posted on 16/06/2008. By Pete Otaqui.
I was writing a custom set of validation routines for a form, and using Dojo’s Dijit.Editor component – and having some trouble attaching my “invalid” class and a tooltip to a ‘required’ editor.
There were several parts to the problem:
- Iframe Transparency in IE
- Targeting the containing div node, the editor’s iframe tag, and that iframe’s body node
- Ignoring the weird default content that Dojo, or possibly the browser itself, adds to the Editor (a <br /> tag, but with a special attribute in Mozilla browsers)
- Removing the class once the user makes a change to the content
Ignoring all the rest, and a lot of the specifics (since I’m sure there are better ways to achieve all this) I’m just going to note how to get use dojo.connect to respond to a ‘click’ inside the editor area. It’s worth noting that using the normal method’s you would expect sort of work – but only when you click on the Editor’s toolbar rather than the inside the editable area. That being said, here you go:
<textarea dojoType="dijit.Editor" id="dijitEditor">Click Me</textarea>
<script>
dojo.addOnLoad(function() {
var dijitEditor = dijit.byId('dijitEditor');
var eBody = dijitEditor.iframe.contentDocument.body;
dojo.connect(eBody,'click',onEditorClick);
});
function onEditorClick() {
alert('you clicked the editor window');
}
</script>
NB – Not IE-friendly . This won’t work in IE because of the contentDocument property, which it doesn’t support – but you could use the document.frames[] array instead. Note that the iframe’s id is widgetid+’_iframe’ in all except Mozilla. So something like this:
dojo.addOnLoad(function() {
var dijitEditor = dijit.byId('dijitEditor');
var eBody;
if ( dojo.isIE ) {
eBody = document.frames['dijitEditor_iframe'].body;
} else {
eBody = dijitEditor.iframe.contentDocument.body;
}
dojo.connect(eBody,'click',onEditorClick);
});
I really went down the rabbit hole for while chasing ‘ondijitclick’ and the ‘events’ / ‘captureEvents’ properties of the Dijit.Editor, but ended up using this fairly straightforward custom method.