Hi,
First, I chose to inherit from textarea because a ckeditor widget is a
drop-in replacement for a textarea, just as an htmlarea is a drop-in
replacement for a textarea. In addition, the code is very small as a
result, because I just hijack the html textarea element directly. This was
suggested by someone else in an earlier message (sorry, my memory fails me
as to whom).
Second, I haven't seen any errors of that sort. Try including the source
version of CKeditor and paste the message here. Just in case the problem
was in something I've fixed, here is the latest version of the ckeditor
widget I've been using in my own code (which does not differ in any
significant ways, but fixes a few minor issues):
/* ************************************************************************
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])
#ignore(CKEDITOR)
#ignore(CKFinder)
************************************************************************ */
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.setMinHeight(300);
this.setMinWidth(700);
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']
]
});
if (CKFinder) {
CKFinder.setupCKEditor(this.__ckEditor, '/js/ckfinder/');
}
}, 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);
}
}
});
On Sat, Mar 5, 2011 at 2:15 PM, Jean-Baptiste BRIAUD -- Novlog <
[email protected]> wrote:
> Sorry, I think I forgot to paste the error message :-)
> >From my memories, something like m.lang not recognized ...
>
> The biggest problem is the fact nothing shown on screen.
> As I had very very little time, I gave up the integration.
> In summary, it didn't work for me.
>
> I'm wondering why you choose to inherit from TextArea rather from Widget ?
> It sound like the editor is not "kind of" TextArea like inheritance should
> be.
> What do you think ?
>
> On 5 mars 2011, at 05:18, Greg Beaver wrote:
>
> > Hi,
> >
> > The constructor parameters are not necessary, as default values are used
> > if not present.
> >
> OK.
>
> > As for your error message, hard to debug without seeing it. Chances are
> > you either forgot to include the class
> I think I would have others bigger errors. The error message was on
> "m.lang" and look intern to your class of the editor itself.
>
> > , forgot to regenerate
> For complex reason, we regenerate each time
>
> > , or forgot
> > to include ckeditor.js BEFORE you include the qooxdoo js file in
> index.html.
> It is definitively included before.
>
> >
> > Greg
> >> Jean-Baptiste BRIAUD -- Novlog <mailto:[email protected]>
> >> March 4, 2011 7:54 AM
> >>
> >>
> >> Hi,
> >>
> >> I'm not sure this will work :
> >>
> >> This is because the constructor need parameters :
> >>
> >> What is the value ? Is it the initial widget's value ?
> >>
> >> BTW, thanks for the integration.
> >>
> >>
> >>
> >>
> >>
> ------------------------------------------------------------------------------
> >> What You Don't Know About Data Connectivity CAN Hurt You
> >> This paper provides an overview of data connectivity, details
> >> its effect on application quality, and explores various alternative
> >> solutions. http://p.sf.net/sfu/progress-d2d
> >> _______________________________________________
> >> qooxdoo-devel mailing list
> >> [email protected]
> >> https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
> >> ------------------------------------------------------------------------
> >>
> >> Gregory Beaver <mailto:[email protected]>
> >> January 30, 2011 1:40 AM
> >>
> >>
> >> 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]
> >> <mailto:[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
> >> ------------------------------------------------------------------------
> >
> >
> >
> ------------------------------------------------------------------------------
> > What You Don't Know About Data Connectivity CAN Hurt You
> > This paper provides an overview of data connectivity, details
> > its effect on application quality, and explores various alternative
> > solutions. http://p.sf.net/sfu/progress-d2d
> > _______________________________________________
> > qooxdoo-devel mailing list
> > [email protected]
> > https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
>
>
>
> ------------------------------------------------------------------------------
> What You Don't Know About Data Connectivity CAN Hurt You
> This paper provides an overview of data connectivity, details
> its effect on application quality, and explores various alternative
> solutions. http://p.sf.net/sfu/progress-d2d
> _______________________________________________
> qooxdoo-devel mailing list
> [email protected]
> https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
>
------------------------------------------------------------------------------
Colocation vs. Managed Hosting
A question and answer guide to determining the best fit
for your organization - today and in the future.
http://p.sf.net/sfu/internap-sfd2d
_______________________________________________
qooxdoo-devel mailing list
[email protected]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
