Hi Derrel,
here's a very small demo based on a qooxdoo skeleton app and a slightly
reduced version of Greg's ckEditor class. For me this works in FF 5 and IE
6:
-----------------------------------
ckEditor.js
-----------------------------------
qx.Class.define("editortest.ckEditor",
{
extend: qx.ui.form.TextArea,
properties:
{
appearance:
{
refine: true,
init: "widget"
}
},
construct: function(value, menubarheight)
{
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,
width: hint.width,
resize_enabled: false,
tabIndex: this.getTabIndex(),
skin: "v2"
});
}, this);
CKEDITOR.config.contentsCss = 'styles.css';
CKEDITOR.config.enterMode = CKEDITOR.ENTER_BR;
},
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);
}
}
});
-----------------------------------
Application.js
-----------------------------------
qx.Class.define("editortest.Application",
{
extend : qx.application.Standalone,
/*
*****************************************************************************
MEMBERS
*****************************************************************************
*/
members :
{
/**
* This method contains the initial application code and gets called
* during startup of the application
*
* @lint ignoreDeprecated(alert)
*/
main : function()
{
// Call super class
this.base(arguments);
// Enable logging in debug variant
if (qx.core.Variant.isSet("qx.debug", "on"))
{
// support native logging capabilities, e.g. Firebug for Firefox
qx.log.appender.Native;
// support additional cross-browser console. Press F7 to toggle
visibility
qx.log.appender.Console;
}
/*
-------------------------------------------------------------------------
Below is your actual application code...
-------------------------------------------------------------------------
*/
var editor = new editortest.ckEditor("");
editor.set({width: 600, height: 400});
// Document is the application root
var doc = this.getRoot();
// Add button to document at fixed coordinates
doc.add(editor, {edge: "north"});
}
}
});
-----------------------------------
index.html
-----------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"; xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>EditorTest</title>
</head>
<body></body>
</html>
BTW: I'm using CKEditor v3.5.
HTH,
Norbert
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);
> }
> }
> });
>
--
View this message in context:
http://qooxdoo.678.n2.nabble.com/integrating-CKEditor-3-0-into-qooxdoo-tp5974103p6597867.html
Sent from the qooxdoo mailing list archive at Nabble.com.
------------------------------------------------------------------------------
Magic Quadrant for Content-Aware Data Loss Prevention
Research study explores the data loss prevention market. Includes in-depth
analysis on the changes within the DLP market, and the criteria used to
evaluate the strengths and weaknesses of these DLP solutions.
http://www.accelacomm.com/jaw/sfnl/114/51385063/
_______________________________________________
qooxdoo-devel mailing list
[email protected]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
