Skip to main content


Eclipse Community Forums
Forum Search:

Search      Help    Register    Login    Home
Home » Eclipse Projects » Remote Application Platform (RAP) » wysiwyg editor
wysiwyg editor [message #135276] Sun, 07 June 2009 07:14 Go to next message
Hasan Ceylan is currently offline Hasan CeylanFriend
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 Go to previous messageGo to next message
Ivan Furnadjiev is currently offline Ivan FurnadjievFriend
Messages: 2359
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 Go to previous messageGo to next message
Hasan Ceylan is currently offline Hasan CeylanFriend
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 Go to previous messageGo to next message
Jorge is currently offline JorgeFriend
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 Go to previous message
Hasan Ceylan is currently offline Hasan CeylanFriend
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));
>
>
> }
> }
>
> });
Previous Topic:Wysiwyg html editor
Next Topic:RWT Test Dependencies
Goto Forum:
  


Current Time: Sat Dec 04 05:58:06 GMT 2021

Powered by FUDForum. Page generated in 0.03888 seconds
.:: Contact :: Home ::.

Powered by: FUDforum 3.0.2.
Copyright ©2001-2010 FUDforum Bulletin Board Software

Back to the top