Hi,
After banging my head on the wall forever, I got CKEditor integration to
work. It is NOT trivial, but the result is pretty small in LOC. Basically,
CKEditor never updates the textarea value unless you do it explicitly, and
so in qooxdoo-world, that means attaching to an execute event on a button
for most forms. Thus, to use my little TextArea replacement, you need to
follow 3 simple steps;
1) load ckeditor.js in the <head> of your index.html BEFORE qooxdoo.js
2) use code like so:
var ckeditor = new qooxdoo.widgets.Ckeditor();
var savebutton = new qx.ui.form.Button("Save");
ckeditor.linkTo(savebutton);
savebutton.addListener("execute", function() {
alert(ckeditor.getValue());
});
3) include this code:
/* ************************************************************************
qooxdoo - the new era of web development
http://qooxdoo.org
Copyright:
2004-2007 1&1 Internet AG, Germany, http://www.1and1.org
License:
LGPL: http://www.gnu.org/licenses/lgpl.html
EPL: http://www.eclipse.org/org/documents/epl-v10.php
See the LICENSE file in the project's top-level directory for details.
Authors:
* Gregory Beaver ([email protected])
************************************************************************ */
qx.Class.define("qooxdoo.widgets.Ckeditor", {
extend: qx.ui.form.TextArea,
properties: {
appearance: {
refine: true,
init: "widget"
}
},
/*
*****************************************************************************
MEMBERS
*****************************************************************************
*/
/**
* Main method - application start point
*/
construct: function(value, menubarheight)
{
if (!menubarheight) {
menubarheight = 141; // default menubar is 141px
}
this.base(arguments, value);
this.addListenerOnce("appear", function(e) {
var el = this.getContentElement().getDomElement();
var hint = this.getSizeHint();
this.__ckEditor = CKEDITOR.replace(el, {
height : hint.height - menubarheight - 42,
// 42px for the frame
width : hint.width,
resize_enabled : false,
tabIndex : this.getTabIndex(),
toolbar : [ // everything but Maximize
['Source','-','Save','NewPage','Preview','-','Templates'],
['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print',
'SpellChecker', 'Scayt'],
['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select',
'Button', 'ImageButton', 'HiddenField'],
'/',
['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
['NumberedList','BulletedList','-','Outdent','Indent','Blockquote','CreateDiv'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
['BidiLtr', 'BidiRtl' ],
['Link','Unlink','Anchor'],
['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak','Iframe'],
'/',
['Styles','Format','Font','FontSize'],
['TextColor','BGColor'],
['ShowBlocks','-','About']
]
});
}, this);
},
members :
{
__ckEditor: null,
linkTo: function(savebutton)
{
savebutton.addListener("execute", function() {
var old = this.getValue();
this.__ckEditor.updateElement();
var val = this.getValue();
if (old != val) {
this.fireDataEvent("changeValue", val, old);
}
}, this);
}
}
});
It is beautiful, and kicks qooxdoo's HtmlArea's butt (sorry to internal
devs, I tried to use htmlarea for a year, but it is too quirky to be
practical).
Hopefully this saves others the headache I have.
Greg
------------------------------------------------------------------------------
Special Offer-- Download ArcSight Logger for FREE (a $49 USD value)!
Finally, a world-class log management solution at an even better price-free!
Download using promo code Free_Logger_4_Dev2Dev. Offer expires
February 28th, so secure your free ArcSight Logger TODAY!
http://p.sf.net/sfu/arcsight-sfd2d
_______________________________________________
qooxdoo-devel mailing list
[email protected]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
