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.OO.defineClass("FCKEditor", qx.ui.embed.Iframe, function () { qx.ui.embed.Iframe.call( this, "fckeditor.html" ); with (this) { setFrameName("fckeditor" + this.toHashCode() ); setOverflow("hidden"); setBorder("none"); }; this.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(); }); }); /** * get iframe window object * @return mixed object or false if editor is not yet available */ qx.Proto.getIframeWindow = function() { var ifnode = this.getIframeNode(); if (typeof ifnode == "object" && typeof ifnode.contentWindow == "object") { return ifnode.contentWindow; } else { return false; }; }; /** * wait until editor is available and set editor HTML content * @param string HTML text */ qx.Proto.setValue = function(propValue) { var timer = new qx.client.Timer(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 * @return string HTML text */ qx.Proto.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? */ qx.Proto._modifyEnabled = function(propValue, propOldValue, propData) { this.setVisibility(propValue); //this.getIframeWindow().document.frames[0].objContent.DOM.designMode = propValue ? "On":"Off";// doesn't work 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)
