Home » Eclipse Projects » Remote Application Platform (RAP) » wysiwyg editor
| wysiwyg editor [message #135276] |
Sun, 07 June 2009 07:14  |
 Hasan Ceylan
Messages: 198
Registered: July 2009 |
Senior Member |
|
|
Hello,
I have seen a number of questions about RTE / wysiwyg editors, and I 'm in
need of one. I'am trying to integrate a trimmed down version of Mozilla
Midas wysiwyg to RAP.
I've almost archived what I need to do
1) Justification
2) Font family selection
3) Font properties (bold/italic/underlined)
4) Bullets and numbering
Although my implementation is not final, it gives me what I need for the
moment and might be of others help as well. And as always with the help of
others, we might have a working RTE.
So far I have arcihed to:
1) Display a document
2) Update the html any time
3) Get the html on focus out
So far my problems are:
1) (Major) Works in Firefox but focus out is not triggered on IE.
2) (Minor) Initially requires two clicks to focus
The final component should be able to
1) Send the damaged parts of the document rather then the whole document
2) Should support modifyText event
I would appreciate if someone with good js skills could have a look and
comment.
Below is the js code.
------------------------------------
qx.Class.define("org.eclipse.rwt.rte.RTE", {
extend : qx.ui.embed.Iframe,
construct : function(id) {
this.base(arguments);
this.setHtmlProperty("id", id);
this._id = id;
this.setSource("org/eclipse/rwt/rte/rte.html");
this._mainControl = null;
// Work around for late initialization of the content
qx.client.Timer.once(this._deferredInit, this, 100);
},
members : {
//static
_doActivate : function(obj) {
var shell = null;
var parent = obj.getParent();
while (shell == null && parent != null) {
if (parent.classname == "org.eclipse.swt.widgets.Shell") {
shell = parent;
}
parent = parent.getParent();
}
if (shell != null) {
shell.setActiveChild(obj);
}
},
//static
_sendModifyText : function(obj) {
alert(obj.getHtml());
var widgetManager = org.eclipse.swt.WidgetManager.getInstance();
var id = widgetManager.findIdByWidget(obj);
var req = org.eclipse.swt.Request.getInstance();
req.addParameter(id + ".html", obj.getHtml());
req.send();
},
setHtml : function(html) {
if (this._mainControl != null) {
this._mainControl.body.innerHTML = html;
}
},
getHtml : function() {
return this._mainControl.body.innerHTML;
},
// Work around for late initialization of the content
_deferredInit : function() {
if (this.getContentWindow() == null) {
qx.client.Timer.once(this._deferredInit, this, 100);
return;
}
_window = this.getContentDocument();
if (_window == null) {
qx.client.Timer.once(this._deferredInit, this, 200);
return;
}
_innerFrame = _window.getElementById("edit");
if (_innerFrame == null) {
qx.client.Timer.once(this._deferredInit, this, 200);
return;
}
this._mainControl = _innerFrame.contentWindow.document;
if (this._mainControl == null) {
qx.client.Timer.once(this._deferredInit, this, 200);
return;
}
if (this._mainControl.addEventListener) {
this._mainControl.addEventListener("blur", (function(obj) {
return function(event) {
obj._sendModifyText(obj);
}
})(this), true);
this._mainControl.addEventListener("focus", (function(obj) {
return function(event) {
obj._doActivate(obj);
}
})(this), true);
} else {
this._mainControl.attachEvent("blur", (function(obj) {
return function(event) {
obj._sendModifyText(obj);
}
})(this), true);
this._mainControl.attachEvent("focus", (function(obj) {
return function(event) {
obj._doActivate(obj);
}
})(this), true);
}
}
}
});
------------
The way it works is:
1) An iframe is initiated and the inner window is populated with a trimmed
down version of mozilla midas
2) A timer based initialization code tracks the existence of second inner
frame (created by midas) and as soon as available install focus and blur
listeners
3) On blur the html is sent to the server
4) On focus the focus is adjusted (from GMap example)
Regards,
Hasan Ceylan
|
|
|
| Re: wysiwyg editor [message #135569 is a reply to message #135276] |
Tue, 09 June 2009 08:43  |
Ivan Furnadjiev
Messages: 2426
Registered: July 2009
Location: Sofia, Bulgaria |
Senior Member |
|
|
Hi Hasan,
to fix the problem "2) (Minor) Initially requires two clicks to focus)"
just call this.release(); of the IFrame when the content of the IFrame
is loaded. (you can do this on "load" event). This remove the blocker
div tag witch is on the top of the IFrame element :-). About problem "1)
(Major) Works in Firefox but focus out is not triggered on IE." - try
using qooxdoo API for adding/removig listeners from the DOM elements:
qx.html.EventRegistration.addEventListener( element, type, function )
qx.html.EventRegistration.removeEventListener( element, type, function )
In this case the browser specific code for event listeners will be held
by qooxdoo.
....and try to attach the listeners (focus/blur) to the document body
instead of document itself.
Best,
Ivan
Hasan Ceylan wrote:
> Hello,
>
> I have seen a number of questions about RTE / wysiwyg editors, and I 'm in
> need of one. I'am trying to integrate a trimmed down version of Mozilla
> Midas wysiwyg to RAP.
>
> I've almost archived what I need to do
> 1) Justification
> 2) Font family selection
> 3) Font properties (bold/italic/underlined)
> 4) Bullets and numbering
>
>
> Although my implementation is not final, it gives me what I need for the
> moment and might be of others help as well. And as always with the help of
> others, we might have a working RTE.
>
> So far I have arcihed to:
> 1) Display a document
> 2) Update the html any time
> 3) Get the html on focus out
>
> So far my problems are:
> 1) (Major) Works in Firefox but focus out is not triggered on IE.
> 2) (Minor) Initially requires two clicks to focus
>
> The final component should be able to
> 1) Send the damaged parts of the document rather then the whole document
> 2) Should support modifyText event
>
> I would appreciate if someone with good js skills could have a look and
> comment.
> Below is the js code.
> ------------------------------------
> qx.Class.define("org.eclipse.rwt.rte.RTE", {
> extend : qx.ui.embed.Iframe,
>
> construct : function(id) {
> this.base(arguments);
> this.setHtmlProperty("id", id);
> this._id = id;
> this.setSource("org/eclipse/rwt/rte/rte.html");
>
> this._mainControl = null;
>
> // Work around for late initialization of the content
> qx.client.Timer.once(this._deferredInit, this, 100);
> },
>
> members : {
>
> //static
> _doActivate : function(obj) {
> var shell = null;
> var parent = obj.getParent();
> while (shell == null && parent != null) {
> if (parent.classname == "org.eclipse.swt.widgets.Shell") {
> shell = parent;
> }
> parent = parent.getParent();
> }
> if (shell != null) {
> shell.setActiveChild(obj);
> }
> },
>
> //static
> _sendModifyText : function(obj) {
> alert(obj.getHtml());
> var widgetManager = org.eclipse.swt.WidgetManager.getInstance();
> var id = widgetManager.findIdByWidget(obj);
> var req = org.eclipse.swt.Request.getInstance();
> req.addParameter(id + ".html", obj.getHtml());
> req.send();
> },
>
> setHtml : function(html) {
> if (this._mainControl != null) {
> this._mainControl.body.innerHTML = html;
> }
> },
>
> getHtml : function() {
> return this._mainControl.body.innerHTML;
> },
>
> // Work around for late initialization of the content
> _deferredInit : function() {
> if (this.getContentWindow() == null) {
> qx.client.Timer.once(this._deferredInit, this, 100);
> return;
> }
>
> _window = this.getContentDocument();
> if (_window == null) {
> qx.client.Timer.once(this._deferredInit, this, 200);
> return;
> }
>
> _innerFrame = _window.getElementById("edit");
>
> if (_innerFrame == null) {
> qx.client.Timer.once(this._deferredInit, this, 200);
> return;
> }
>
> this._mainControl = _innerFrame.contentWindow.document;
> if (this._mainControl == null) {
> qx.client.Timer.once(this._deferredInit, this, 200);
> return;
> }
>
> if (this._mainControl.addEventListener) {
>
> this._mainControl.addEventListener("blur", (function(obj) {
> return function(event) {
> obj._sendModifyText(obj);
> }
> })(this), true);
>
> this._mainControl.addEventListener("focus", (function(obj) {
> return function(event) {
> obj._doActivate(obj);
> }
> })(this), true);
>
> } else {
>
> this._mainControl.attachEvent("blur", (function(obj) {
> return function(event) {
> obj._sendModifyText(obj);
> }
> })(this), true);
>
> this._mainControl.attachEvent("focus", (function(obj) {
> return function(event) {
> obj._doActivate(obj);
> }
> })(this), true);
> }
> }
> }
>
> });
> ------------
>
> The way it works is:
> 1) An iframe is initiated and the inner window is populated with a trimmed
> down version of mozilla midas
> 2) A timer based initialization code tracks the existence of second inner
> frame (created by midas) and as soon as available install focus and blur
> listeners
> 3) On blur the html is sent to the server
> 4) On focus the focus is adjusted (from GMap example)
>
> Regards,
> Hasan Ceylan
>
>
|
|
|
| Re: wysiwyg editor [message #135693 is a reply to message #135569] |
Wed, 10 June 2009 12:25 |
Hasan Ceylan
Messages: 198
Registered: July 2009 |
Senior Member |
|
|
Hello Ivan,
Thanks a lot for the invaluable information you have sent...
Hasan
Ivan Furnadjiev wrote:
> Hi Hasan,
> to fix the problem "2) (Minor) Initially requires two clicks to focus)"
> just call this.release(); of the IFrame when the content of the IFrame
> is loaded. (you can do this on "load" event). This remove the blocker
> div tag witch is on the top of the IFrame element :-). About problem "1)
> (Major) Works in Firefox but focus out is not triggered on IE." - try
> using qooxdoo API for adding/removig listeners from the DOM elements:
> qx.html.EventRegistration.addEventListener( element, type, function )
> qx.html.EventRegistration.removeEventListener( element, type, function )
> In this case the browser specific code for event listeners will be held
> by qooxdoo.
> ...and try to attach the listeners (focus/blur) to the document body
> instead of document itself.
>
> Best,
> Ivan
>
> Hasan Ceylan wrote:
>> Hello,
>>
>> I have seen a number of questions about RTE / wysiwyg editors, and I 'm
>> in need of one. I'am trying to integrate a trimmed down version of
>> Mozilla Midas wysiwyg to RAP.
>>
>> I've almost archived what I need to do
>> 1) Justification
>> 2) Font family selection
>> 3) Font properties (bold/italic/underlined)
>> 4) Bullets and numbering
>>
>>
>> Although my implementation is not final, it gives me what I need for the
>> moment and might be of others help as well. And as always with the help
>> of others, we might have a working RTE.
>>
>> So far I have arcihed to:
>> 1) Display a document
>> 2) Update the html any time
>> 3) Get the html on focus out
>>
>> So far my problems are:
>> 1) (Major) Works in Firefox but focus out is not triggered on IE.
>> 2) (Minor) Initially requires two clicks to focus
>>
>> The final component should be able to
>> 1) Send the damaged parts of the document rather then the whole document
>> 2) Should support modifyText event
>>
>> I would appreciate if someone with good js skills could have a look and
>> comment.
>> Below is the js code.
>> ------------------------------------
>> qx.Class.define("org.eclipse.rwt.rte.RTE", {
>> extend : qx.ui.embed.Iframe,
>>
>> construct : function(id) {
>> this.base(arguments);
>> this.setHtmlProperty("id", id);
>> this._id = id;
>> this.setSource("org/eclipse/rwt/rte/rte.html");
>>
>> this._mainControl = null;
>>
>> // Work around for late initialization of the content
>> qx.client.Timer.once(this._deferredInit, this, 100);
>> },
>>
>> members : {
>>
>> //static
>> _doActivate : function(obj) {
>> var shell = null;
>> var parent = obj.getParent();
>> while (shell == null && parent != null) {
>> if (parent.classname == "org.eclipse.swt.widgets.Shell") {
>> shell = parent;
>> }
>> parent = parent.getParent();
>> }
>> if (shell != null) {
>> shell.setActiveChild(obj);
>> }
>> },
>>
>> //static
>> _sendModifyText : function(obj) {
>> alert(obj.getHtml());
>> var widgetManager = org.eclipse.swt.WidgetManager.getInstance();
>> var id = widgetManager.findIdByWidget(obj);
>> var req = org.eclipse.swt.Request.getInstance();
>> req.addParameter(id + ".html", obj.getHtml());
>> req.send();
>> },
>>
>> setHtml : function(html) {
>> if (this._mainControl != null) {
>> this._mainControl.body.innerHTML = html;
>> }
>> },
>>
>> getHtml : function() {
>> return this._mainControl.body.innerHTML;
>> },
>>
>> // Work around for late initialization of the content
>> _deferredInit : function() {
>> if (this.getContentWindow() == null) {
>> qx.client.Timer.once(this._deferredInit, this, 100);
>> return;
>> }
>>
>> _window = this.getContentDocument();
>> if (_window == null) {
>> qx.client.Timer.once(this._deferredInit, this, 200);
>> return;
>> }
>>
>> _innerFrame = _window.getElementById("edit");
>>
>> if (_innerFrame == null) {
>> qx.client.Timer.once(this._deferredInit, this, 200);
>> return;
>> }
>>
>> this._mainControl = _innerFrame.contentWindow.document;
>> if (this._mainControl == null) {
>> qx.client.Timer.once(this._deferredInit, this, 200);
>> return;
>> }
>>
>> if (this._mainControl.addEventListener) {
>>
>> this._mainControl.addEventListener("blur", (function(obj) {
>> return function(event) {
>> obj._sendModifyText(obj);
>> }
>> })(this), true);
>>
>> this._mainControl.addEventListener("focus", (function(obj) {
>> return function(event) {
>> obj._doActivate(obj);
>> }
>> })(this), true);
>>
>> } else {
>>
>> this._mainControl.attachEvent("blur", (function(obj) {
>> return function(event) {
>> obj._sendModifyText(obj);
>> }
>> })(this), true);
>>
>> this._mainControl.attachEvent("focus", (function(obj) {
>> return function(event) {
>> obj._doActivate(obj);
>> }
>> })(this), true);
>> }
>> }
>> }
>>
>> });
>> ------------
>>
>> The way it works is:
>> 1) An iframe is initiated and the inner window is populated with a
>> trimmed down version of mozilla midas
>> 2) A timer based initialization code tracks the existence of second inner
>> frame (created by midas) and as soon as available install focus and blur
>> listeners
>> 3) On blur the html is sent to the server
>> 4) On focus the focus is adjusted (from GMap example)
>>
>> Regards,
>> Hasan Ceylan
>>
>>
|
|
|
| Re: wysiwyg editor [message #135812 is a reply to message #135693] |
Thu, 11 June 2009 23:21 |
Jorge
Messages: 13
Registered: July 2009 |
Junior Member |
|
|
Hi, I think that I've solved the two problems.
RTE.html:
function tbclick()
{
document.getElementById("edit").contentWindow.document.execCommand(this.id,
false, null);
document.getElementById("edit").contentWindow.focus();
}
RTE.js:
qx.Class.define("org.eclipse.rwt.rte.RTE", {
extend : qx.ui.embed.Iframe,
construct : function(id) {
this.base(arguments);
this.setHtmlProperty("id", id);
this._id = id;
this._html = "";
this._mainControl = null;
this._innerFrame = null;
this.setSource("org/eclipse/rwt/rte/rte.html");
qx.client.Timer.once(this._deferredInit, this, 100);
},
members : {
//static
_doActivate : function(obj) {
var shell = null;
var parent = obj.getParent();
while (shell == null && parent != null) {
if (parent.classname == "org.eclipse.swt.widgets.Shell") {
shell = parent;
}
parent = parent.getParent();
}
if (shell != null) {
shell.setActiveChild(obj);
}
},
//static
_sendModifyText : function(obj) {
var widgetManager = org.eclipse.swt.WidgetManager.getInstance();
var id = widgetManager.findIdByWidget(obj);
var req = org.eclipse.swt.Request.getInstance();
req.addParameter(id + ".html", obj.getHtml());
req.send();
},
setHtml : function(html) {
this._html = html;
if (this._mainControl != null) {
this._mainControl.body.innerHTML = html;
}
},
getHtml : function() {
return this._mainControl.body.innerHTML;
},
_onblur : function(obj){
this._sendModifyText(this);
},
_onfocus : function(obj){
this._doActivate(this);
},
_onload : function(obj){
this.release();
},
_deferredInit : function() {
if (this.getContentWindow() == null) {
qx.client.Timer.once(this._deferredInit, this, 100);
return;
}
_window = this.getContentDocument();
if (_window == null) {
qx.client.Timer.once(this._deferredInit, this, 200);
return;
}
_innerFrame = _window.getElementById("edit");
if (_innerFrame == null) {
qx.client.Timer.once(this._deferredInit, this, 200);
return;
}
this._mainControl = _innerFrame.contentWindow.document;
if (this._mainControl == null) {
qx.client.Timer.once(this._deferredInit, this, 200);
return;
}
this.setHtml(this._html);
qx.html.EventRegistration.addEventListener(this._mainControl , "blur",
qx.lang.Function.bind(this._onblur, this));
qx.html.EventRegistration.addEventListener(this._mainControl ,
"focus", qx.lang.Function.bind(this._onfocus, this));
qx.html.EventRegistration.addEventListener(_innerFrame.conte ntWindow,
"blur", qx.lang.Function.bind(this._onblur, this));
qx.html.EventRegistration.addEventListener(_innerFrame.conte ntWindow,
"focus", qx.lang.Function.bind(this._onfocus, this));
qx.html.EventRegistration.addEventListener(_innerFrame.conte ntWindow,
"load", qx.lang.Function.bind(this._onload, this));
}
}
});
|
|
|
| Re: wysiwyg editor [message #136116 is a reply to message #135812] |
Mon, 15 June 2009 11:06 |
Hasan Ceylan
Messages: 198
Registered: July 2009 |
Senior Member |
|
|
Good news Jorge, I'll try your solution today.
Hasan
Jorge wrote:
> Hi, I think that I've solved the two problems.
>
> RTE.html:
> function tbclick()
> {
>
>
document.getElementById("edit").contentWindow.document.execCommand(this.id,
> false, null);
> document.getElementById("edit").contentWindow.focus();
> }
>
>
> RTE.js:
> qx.Class.define("org.eclipse.rwt.rte.RTE", {
> extend : qx.ui.embed.Iframe,
>
> construct : function(id) {
> this.base(arguments);
> this.setHtmlProperty("id", id);
> this._id = id;
> this._html = "";
> this._mainControl = null;
> this._innerFrame = null;
>
> this.setSource("org/eclipse/rwt/rte/rte.html");
> qx.client.Timer.once(this._deferredInit, this, 100);
> },
>
> members : {
>
> //static
> _doActivate : function(obj) {
> var shell = null;
> var parent = obj.getParent();
> while (shell == null && parent != null) {
> if (parent.classname == "org.eclipse.swt.widgets.Shell") {
> shell = parent;
> }
> parent = parent.getParent();
> }
> if (shell != null) {
> shell.setActiveChild(obj);
> }
> },
>
> //static
> _sendModifyText : function(obj) {
> var widgetManager = org.eclipse.swt.WidgetManager.getInstance();
> var id = widgetManager.findIdByWidget(obj);
> var req = org.eclipse.swt.Request.getInstance();
> req.addParameter(id + ".html", obj.getHtml());
> req.send();
> },
>
> setHtml : function(html) {
> this._html = html;
> if (this._mainControl != null) {
> this._mainControl.body.innerHTML = html;
> }
> },
>
> getHtml : function() {
> return this._mainControl.body.innerHTML;
> },
>
> _onblur : function(obj){
> this._sendModifyText(this);
> },
>
> _onfocus : function(obj){
> this._doActivate(this);
> },
>
> _onload : function(obj){
> this.release();
> },
>
> _deferredInit : function() {
> if (this.getContentWindow() == null) {
> qx.client.Timer.once(this._deferredInit, this, 100);
> return;
> }
>
> _window = this.getContentDocument();
> if (_window == null) {
> qx.client.Timer.once(this._deferredInit, this, 200);
> return;
> }
>
> _innerFrame = _window.getElementById("edit");
>
> if (_innerFrame == null) {
> qx.client.Timer.once(this._deferredInit, this, 200);
> return;
> }
>
> this._mainControl = _innerFrame.contentWindow.document;
> if (this._mainControl == null) {
> qx.client.Timer.once(this._deferredInit, this, 200);
> return;
> }
>
> this.setHtml(this._html);
>
> qx.html.EventRegistration.addEventListener(this._mainControl , "blur",
> qx.lang.Function.bind(this._onblur, this));
> qx.html.EventRegistration.addEventListener(this._mainControl ,
> "focus", qx.lang.Function.bind(this._onfocus, this));
>
>
> qx.html.EventRegistration.addEventListener(_innerFrame.conte ntWindow,
> "blur", qx.lang.Function.bind(this._onblur, this));
>
> qx.html.EventRegistration.addEventListener(_innerFrame.conte ntWindow,
> "focus", qx.lang.Function.bind(this._onfocus, this));
>
>
> qx.html.EventRegistration.addEventListener(_innerFrame.conte ntWindow,
> "load", qx.lang.Function.bind(this._onload, this));
>
>
> }
> }
>
> });
|
|
|
Goto Forum:
Current Time: Thu Apr 25 00:57:24 GMT 2024
Powered by FUDForum. Page generated in 0.03610 seconds |
] 
Search
Help
Register
Login
Home
