Hi Greg.
I, too, am having trouble getting the ckeditor to show up inside of any
qooxdoo application. (I have a standalone application working fine.) Using
your code or code of my own, I've got the ckeditor properly replacing the
specified textarea node, but it never properly initializes. During the
replace() call, the node is set to visibility:hidden, and there it forever
remains, with nothing else happening. I believe there's supposed to be some
event that gets fired by ckeditor that completes the initialization, but I
don't think that's happening. (I've tried adding code to listen for its
"instanceReady" event, but that seems never to be fired.)
Do you happen to have a complete, small working example that uses your
Ckeditor class and creates a ckeditor instance within a qooxdoo application?
I'd really appreciate seeing it.
Thanks!
Derrell
On Tue, Mar 8, 2011 at 23:57, Gregory Beaver <[email protected]> wrote:
> 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
>
>
------------------------------------------------------------------------------
Storage Efficiency Calculator
This modeling tool is based on patent-pending intellectual property that
has been used successfully in hundreds of IBM storage optimization engage-
ments, worldwide. Store less, Store more with what you own, Move data to
the right place. Try It Now! http://www.accelacomm.com/jaw/sfnl/114/51427378/
_______________________________________________
qooxdoo-devel mailing list
[email protected]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
