Opened 13 years ago

Closed 13 years ago

Last modified 12 years ago

#2538 closed defect (fixed)

Multiple problems with Editor2 widget (Toolbar issue on Firefox, Rendering issue on IE)

Reported by: jaredj.jurkiewicz@… Owned by: liucougar
Priority: high Milestone:
Component: Editor Version: 0.4.2rc1
Keywords: Cc:
Blocked By: Blocking:

Description

I've been working with the Editor2 widget in an in-house experimental application and have encountered significant difficulties in getting it to work consistently across Firefox and Internet Explorer.

Specifically, when trying to construct the widget programmatically, I encounter significant variences in behavior. The problems encountered:

1.) On Firefox, when the editor is instantiated programmatically and attached to a node in the DOM, the Color selection menu items for foreground and background color do not function properly. They always report the error: DEBUG: dojo.widget.DomWidget?.addChild() attempted on non-container widget

2.) On Internet Explorer 7 (as well as 6), the editor doesn't instantiate right at all if you attempt to programmatically set its content after creation. It ends up just creating a read-only view without even the editor toolbar. Note this happens only if you do: editor.replaceEditorContent("<some text>");. If you do not try to set the starting content, it seems to instantiate fine, at least. I have very simple testcases which demonstrate the problems. They can be found below:

Testcase 1 (programmatic instantiation using ContentPane? as container): <!DOCTYPE HTML PUBLIC "-W3CDTD HTML 4.01EN" " http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Test the editor</title> <script type="text/javascript">

var djConfig = {isDebug: true};

</script> <script type="text/javascript" src="dojo/dojo.js"></script> <script language="JavaScript?" type="text/javascript">

dojo.require("dojo.widget.ContentPane?"); dojo.require("dojo.widget.Editor2"); dojo.require("dojo.event.*");

function init(){

var editSetter = {

setContent: function(editor) {

dojo.debug("Calling set of the editor content."); editor.replaceEditorContent("<B>FOO</B>");

}

};

dojo.debug("Subscribing to editor init topic."); dojo.event.topic.subscribe("dojo.widget.Editor2::onLoad", editSetter, "setContent");

var container = dojo.byId("editorHolder"); var editorAttachPoint = dojo.byId("editorAttachPoint"); var contentPane = dojo.widget.createWidget("ContentPane?", {refreshOnShow: true, executeScripts: false}); var contentEditor = dojo.widget.createWidget("Editor2", {height: "1", shareToolbar: false}); contentPane.setContent(contentEditor.domNode); editorAttachPoint.appendChild (contentPane.domNode);

}

dojo.addOnLoad(init);

</script> </head> <body>

<table border=1" WIDTH="100%">

<tr div="editorHolder" width="100%">

<td>

<div ID="editorAttachPoint"></div>

</td>

</tr>

</table>

</body> </html>

Result:

Instantiates fine on Firefox 1.5, except that the color selectors for fore and background color do not function. On IE, does not instantiate correctly at all. All that is displayed is a read-only version of the content being set.

Testcase 2 (programmatic instantiation using ContentPane? as container, using addchild instead of set content): <!DOCTYPE HTML PUBLIC "-W3CDTD HTML 4.01EN" " http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Test the editor</title> <script type="text/javascript">

var djConfig = {isDebug: true};

</script> <script type="text/javascript" src="dojo/dojo.js"></script> <script language="JavaScript?" type="text/javascript">

dojo.require("dojo.widget.ContentPane?"); dojo.require("dojo.widget.Editor2"); dojo.require("dojo.event.*");

function init(){

var editSetter = {

setContent: function(editor) {

dojo.debug("Calling set of the editor content."); editor.replaceEditorContent("<B>FOO</B>");

}

};

dojo.debug("Subscribing to editor init topic."); dojo.event.topic.subscribe("dojo.widget.Editor2::onLoad", editSetter, "setContent");

var container = dojo.byId("editorHolder"); var editorAttachPoint = dojo.byId("editorAttachPoint"); var contentPane = dojo.widget.createWidget("ContentPane?", {refreshOnShow: true, executeScripts: false}); var contentEditor = dojo.widget.createWidget("Editor2", {height: "1", shareToolbar: false}); contentPane.addChild(contentEditor); editorAttachPoint.appendChild (contentPane.domNode);

}

dojo.addOnLoad(init);

</script> </head> <body>

<table border=1" WIDTH="100%">

<tr div="editorHolder" width="100%">

<td>

<div ID="editorAttachPoint"></div>

</td>

</tr>

</table>

</body> </html>

Result:

Instantiates fine on Firefox 1.5, except that the color selectors for fore and background color do not function. On IE, does not instantiate correctly at all. All that is displayed is a read-only version of the content being set.

Testcase 3: (Programmatic creation of Editor2 with containter being a simple DIV (no content pane): <!DOCTYPE HTML PUBLIC "-W3CDTD HTML 4.01EN" " http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Test the editor</title> <script type="text/javascript">

var djConfig = {isDebug: true};

</script> <script type="text/javascript" src="dojo/dojo.js"></script> <script language="JavaScript?" type="text/javascript">

dojo.require("dojo.widget.ContentPane?"); dojo.require("dojo.widget.Editor2"); dojo.require("dojo.event.*");

function init(){

var editSetter = {

setContent: function(editor) {

dojo.debug("Calling set of the editor content."); editor.replaceEditorContent("<B>FOO</B>");

}

};

dojo.debug("Subscribing to editor init topic."); dojo.event.topic.subscribe("dojo.widget.Editor2::onLoad", editSetter, "setContent");

var container = dojo.byId("editorHolder"); var editorAttachPoint = dojo.byId("editorAttachPoint"); var contentEditor = dojo.widget.createWidget("Editor2", {height: "1", shareToolbar: false}, editorAttachPoint);

}

dojo.addOnLoad(init);

</script> </head> <body>

<table border=1" WIDTH="100%">

<tr div="editorHolder" width="100%">

<td>

<div ID="editorAttachPoint"></div>

</td>

</tr>

</table>

</body> </html>

Result:

Instantiates fine on Firefox 1.5, except that the color selectors for fore and background color do not function. On IE, does not instantiate correctly at all. All that is displayed is a read-only version of the content being set.

Note that all the above testscases assume this file is peer to a directory called 'dojo', which contains the contents of a dojo profile. Any programmatic workarounds to get the edtior working consistently across Firefox and IE would be vastly appreciated.

Sincerely, -- Jared Jurkiewicz

Change History (7)

comment:1 Changed 13 years ago by Adam Peller

Component: WidgetsEditor
Owner: changed from bill to liucougar

comment:2 Changed 13 years ago by jared.jurkiewicz@…

I have discovered that problem 1: 1.) On Firefox, when the editor is instantiated programmatically and attached to a node in the DOM, the Color selection menu items for foreground and background color do not function properly. They always report the error: DEBUG: dojo.widget.DomWidget??.addChild() attempted on non-container widget

Does not occur in Dojo 0.4.1. So, something in the 0.4.2 release has caused this regression/bug. I'm wonderig if it may be related to: http://trac.dojotoolkit.org/ticket/2583

I definitely also see issues where I get 'styleValue' problems as well. All in all, it looks like 0.4.2. breaks Editor2. Pretty bad.

comment:3 Changed 13 years ago by liucougar

problem 1 is fixed in r7588

comment:4 Changed 13 years ago by liucougar

Resolution: fixed
Status: newclosed

About the other problem, I tried this, and it works ok in IE:

		dojo.addOnLoad(function(){
			dojo.debug(dojo.event.topic.subscribe);
			dojo.event.topic.subscribe("dojo.widget.Editor2::onLoad", setContent);
			function setContent(e){
				e.replaceEditorContent("<B>FOO</B>");
			}
		});

comment:5 Changed 13 years ago by liucougar

Milestone: 0.4.2

comment:6 Changed 13 years ago by jared.jurkiewicz@…

With the fixes that went into style.js and the fix for the popup container noted above (plus a small change to how I'm instantiating the editor), it's working now for me in the scenario I needed. Thanks for the quick turnaround!

-- Jared

comment:7 Changed 12 years ago by (none)

Milestone: 0.4.2

Milestone 0.4.2 deleted

Note: See TracTickets for help on using tickets.