Using FCK editor as a rich text editor in qooxdoo
FCKEditor can be used inside Qooxdoo with only a few modifications:
1. Download FCK Editor in a directory of your choice.
2. Create the file FCKEditor.js and load it in your main application:
qx.Class.define("FCKEditor", { extend : qx.ui.embed.Iframe, events : { "editor-ready" : "qx.event.type.Event" } , /* ***************************************************************************** CONSTRUCTOR ***************************************************************************** */ construct : function() { qx.ui.embed.Iframe.call(this, "fckeditor.html"); with (this) { setFrameName("fckeditor" + this.toHashCode()); setOverflow("hidden"); } addEventListener("appear", function() { // connect this object and the iframe window var timer = new qx.client.Timer(50); timer.addEventListener("interval", function(e) { if (this.getIframeWindow() && this.getIframeWindow().loaded) { timer.stop(); this.getIframeWindow().setParentWidget(this); this.getIframeNode().style.overflow = "hidden"; this.createDispatchEvent("editor-ready"); } }, this); timer.start(); }); }, /* ***************************************************************************** MEMBERS ***************************************************************************** */ members : { /** * get iframewndow object * * @type member * @return {boolean | var} * mixed object or false if editor is not yet available */ getIframeWindow : function() { var ifnode = this.getIframeNode(); if (ifnode == null) return false; if (typeof ifnode == "object" && typeof ifnode.contentWindow == "object") { return ifnode.contentWindow; } else { return false; } }, /** * wait until editor is available and set editor HTML content * * @type member * @param propValue {var} Current value * @return {boolean} TODOC */ setValue : function(propValue) { var timer = new qx.client.Timer(50); // 50); timer.addEventListener("interval", function(e) { if (this.getIframeWindow() && this.getIframeWindow().loaded) { timer.stop(); this.getIframeWindow().setValue(propValue); } }, this); timer.start(); return true; }, /** * get editor content * * @type member * @return {var} string HTML text */ getValue : function() { return this.getIframeWindow().getValue(); }, /** * enabled property modifier * For lack of a better Idea, I just hide it. * Who knows how to disable the whole thing? * * @type member * @param propValue {var} Current value * @param propOldValue {var} Previous value * @param propData {var} Property configuration map * @return {boolean} TODOC */ _applyEnabled : function(propValue, propOldValue, propData) { this.setVisibility(propValue); return true; } } });
3. Create this HTML file and save it into document root:
<html> <head> <title>FckEditor-Qooxdoo-Widget</title> <script type="text/javascript" src="fckeditor/fckeditor.js" onerror="alert('Cannot load fckeditor.js. Did you install FCKEditor?');"></script> </head> <body> <form onsubmit="dispatchSubmitEvent(); return false" action="" > <script type="text/javascript"> loaded = false; var oEditor = new FCKeditor( 'richedit' ); oEditor.BasePath = 'fckeditor/'; oEditor.ToolbarSet = 'Basic'; oEditor.Width = "100%"; oEditor.Height = "100%"; oEditor.Value = ''; oEditor.Create(); function getValue() { var oEditor = FCKeditorAPI.GetInstance('richedit') ; return oEditor.GetXHTML(); } function setValue(value) { var oEditor = FCKeditorAPI.GetInstance('richedit') ; return oEditor.SetHTML( value ); } function FCKeditor_OnComplete( editorInstance ) { loaded = true; } function setParentWidget ( w ) { this._parent = w; } function getParentWidget () { return this._parent; } function dispatchSubmitEvent() { this.getParentWidget().createDispatchDataEvent("editor-save",this.getValue()); } </script> </form> </body> </html>
4. Add an editor window to your application:
var qx_1 = new qx.ui.window.Window("Editor"); qx_1.set({left:200,top:200,width:500,height:400,visibility:true,display:true}); var qx_2 = new FCKEditor(); qx_2.set({width:"100%",height:"100%"}); // this will be called when the editor is ready for communication qx_2.addEventListener('editor-ready',function(event){ qx_2.setValue("<p>bla bla bla</p>"); }); // this will be called when the user presses the "save" button qx_2.addEventListener('editor-save',function(event){ alert ( event.getData()); }); qx_1.add(qx_2); qx_1.addToDocument(); qx.ui.core.Widget.flushGlobalQueues();
Authors: Kirill Balyasnikov <bal yas nik ovk at yan dex dot ru> (Main code), Christian Boulanger <in fo at biblio graph dot or g> (Some modifications and tutorial), Hubert Denkmair <hd at aspect minus design dot de> (converted class file to 0.7 syntax)
