ckeditor integration issue

[alexbrent]

I am new to smartclient and ckeditor. I posted this as a reply to an old issue, but maybe this will get me some help. We are trying to upgrade from fckeditor to ckeditor v 3.6.1. I am confused about the changes I need to make in the smartclient js file. When I make the changes and then call up the page, where the editor chould be I get a page not found error. Our old code looked like

function createEditor() {
    fck = new FCKeditor("myFCKeditor");
    fck.BasePath = "/ACES/CKEditor/";
    fck.ToolbarSet = "BOE";
    fck.Height = "100%";
    fck.Width = "100%";
}
....
createEditor();
isc.Canvas.create( {
     ID : "Editor",
     autoDraw : false,
     contents : fck.CreateHtml(),
     height : "100%",
     width : "100%"
} );

All the configuration is in the config.js file. I have update this file with the changes for 3.6.1, but am unsure how to change the smartclient js file.
From what I read on the ckeditor documentation, all I should need, since all configuration is in the config file, is

<%@ taglib uri="http://ckeditor.com" prefix="ckeditor" %>

<ckeditor:editor  basePath="/ACES/CKEditor_3.6.1/" editor="editor1" >

I know that thisis asking a lot, but the only person who knew the fckeditor code is gone and I have been thrown this. Any help is greatly appreciated.

[claudiobosticco]

based on this thread you already know http://forums.smartclient.com/showth...oto=nextoldest
I'm using ckeditor 3.6.1

I've included this CkeditorIntegration.js file:

CKEDITOR.config.customConfig = '../com/juve/classes/ckeditor/ckeditorConfig.js';

// HACK 1 - variable to hold setValue() calls made before the editor is ready
var ckInitValue = null;

CKEDITOR.on('instanceReady', function(ev) {
	isc.Log.logInfo("Editor Ready!: " + ev.editor.id);
	if (ckInitValue) {
		ev.editor.setData(ckInitValue);
		ckInitValue = null;
	}
});

isc.defineClass("Ckeditor", "Canvas").addProperties({
	overflow: "visible",
	canDragResize: true,
	redrawOnResize: true,
	zIndex: 0,
	getInnerHTML: function() {
		return "<textarea STYLE='width:100%;height:100%' ID=" + this.getCkId() + "></textarea>";
	},
	redrawOnResize: false,
	draw: function() {
		this.Super("draw", arguments);
		this.loadEditor();
		return this;
	},
	getCkId: function() {
		return this.getID() + ckeditorIntegrationCanvasIdSuffix;
	},	
	loadEditor: function() {
		if (this.ckLoaded == null) {
			isc.Log.logInfo("Creating editor:" + this.getCkId());
			CKEDITOR.replace(this.getCkId(), {
//				toolbar: [['Styles', 'Format'], ['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link']]
			});
			isc.Log.logInfo("Editor Setup initiated...");
			this.ckLoaded = true;
		}
	},
    resetDirty:function() {
        CKEDITOR.instances[this.getCkId()].resetDirty();
    },
    checkDirty:function() {
        return CKEDITOR.instances[this.getCkId()].checkDirty();
    },
    getValue:function() {
        return CKEDITOR.instances[this.getCkId()].getData();
    },
    setValue:function(value) {
        if (CKEDITOR.instances[this.getCkId()]) {
			CKEDITOR.instances[this.getCkId()].setData(value);
		} else {
			ckInitValue = value;
		}
    }
});

isc.defineClass("CkeditorItem", "CanvasItem").addProperties({
	canvasConstructor: "Ckeditor",
	getValue: function() {
		var superValue = this.Super("getValue", arguments);
		var editorValue = null;
		isc.Log.logInfo("Super Value: " + superValue);
		if (CKEDITOR.instances[this.canvas.getCkId()].getData()) {
			editorValue = CKEDITOR.instances[this.canvas.getCkId()].getData();
			isc.Log.logInfo("Editor value:" + editorValue);
			// HACK 2 - we need to work out a better way of keeping the underlying item's value in sync
			// - this could be a SC bug - why not calling getValue() - using direct access instead?
			if (superValue != editorValue)
				this.Super("setValue", editorValue);
			return editorValue;
		} else {
			return superValue;
		}
	},

	setValue: function(value) {
		isc.Log.logInfo("Setting value:" + value);
		// HACK 1 - setValue is called before the editor is ready, so we need to keep hold of the value until it is loaded.
		if (CKEDITOR.instances[this.canvas.getCkId()]) {
			CKEDITOR.instances[this.canvas.getCkId()].setData(value);
		} else {
			ckInitValue = value;
		}
		return this.Super("setValue", arguments);
	}
});

and this is the ckeditorConfig.js file:

/*
Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
*/

CKEDITOR.editorConfig = function( config )
{
	// Define changes to default configuration here. For example:
	// config.uiColor = '#AADC6E';
	config.baseFloatZIndex = 1000000;
	config.language = 'it';
	config.toolbar = 'Full';
	config.width = 850;
	config.height = 450;
	config.resize_enabled = false;
	config.removePlugins = 'elementspath';
//    config.saveFunction = function(data) {
//		alert(data)
//	}
    config.entities = false;
    config.toolbar_Full_isc_save_toolbar =
    [
        { name: 'document',    items : [ 'Source','-','Isc_save','NewPage','DocProps','Preview','Print','-','Templates' ] },
        { name: 'clipboard',   items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] },
        { name: 'editing',     items : [ 'Find','Replace','-','SelectAll','-','SpellChecker', 'Scayt' ] },
        { name: 'forms',       items : [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField' ] },
        '/',
        { name: 'basicstyles', items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat' ] },
        { name: 'paragraph',   items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote','CreateDiv','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl' ] },
        { name: 'links',       items : [ 'Link','Unlink','Anchor' ] },
        { name: 'insert',      items : [ 'Image',/*'Flash',*/'Table','HorizontalRule','Smiley','SpecialChar','PageBreak' ] },
        '/',
        { name: 'styles',      items : [ 'Styles','Format','Font','FontSize' ] },
        { name: 'colors',      items : [ 'TextColor','BGColor' ] },
        { name: 'tools',       items : [ 'Maximize', 'ShowBlocks','-','About' ] }
    ];
    config.extraPlugins = 'isc_save';
    config.toolbar = 'Full_isc_save_toolbar';
};

this is the code I use to display it in a modal window:

isc.defineClass("ModalWindow", "Window").addProperties({
    showMinimizeButton:false,
    showHeaderIcon:false,
    autoSize:true,
    autoCenter:true,
    isModal:true,
    showModalMask:true,
    dismissOnOutsideClick:true
});
var showCkeditor = function (value, callback) {
    if (window.editorWindow) {
        editorWindow.show();
        editorWindow.setValue(value);
        editorWindow.delayCall('resetDirty', [], 500);
        editorWindow.callback = callback;
    } else {
        isc.Ckeditor.create({
            showEdges: true,
            ID: "AnFCKeditor",
            align: "left",
            height: 572,
            save:function() {
                this.editorWindow.save();
            },
            width: 857
        });
        isc.ModalWindow.create({
            ID: "editorWindow",
            title:"Editor",
            editor: AnFCKeditor,
            callback: callback,
            save:function() {
                this.callback(this.getValue());
            },
            closeClick:function() {
                if (this.checkDirty()) {
                    isc.confirm(i18nMessages.modificheNonSalvate, function(value){
                        if (value) {
                            editorWindow.hide();
                        }
                    });
                } else {
                    this.hide();
                }
            },
            resetDirty:function() {
                this.editor.resetDirty();
            },
            checkDirty:function() {
                return this.editor.checkDirty();
            },
            setValue:function(value) {
                this.editor.setValue(value);
            },
            getValue:function() {
                return this.editor.getValue();
            },
            initWidget:function() {
                this.addItem(this.editor);
                this.Super("initWidget", arguments);
                AnFCKeditor.editorWindow = this;
            }
        });
        editorWindow.setValue(value);
        editorWindow.animateShow(defaultAnimationEffect, function(){
                editorWindow.delayCall('resetDirty', [], 500);
        });
    }
};

I open it this way:

showCkeditor(record[fieldName], function(value){
                record[fieldName] = value;
                myDataSource.updateData(record, "if(dsResponse.status >= 0) editorWindow.resetDirty();");
            });

where the function(value) is a callback which will be used to save the edited html.
Saving is triggered by the Isc_save custom button which requires the ckeditor-3.6.1/ckeditor/plugins/isc_save/plugin.js:

CKEDITOR.plugins.add('isc_save',
    {
        init: function(editor) {
            var pluginName = 'isc_save';
            editor.addCommand(pluginName,
                {
                    exec : function(editor) { // basato sul fatto che la classe Ckeditor definita in CkeditorIntegration.js aggiunge
                                              // ckeditorIntegrationCanvasIdSuffix (definito in index.jsp) all'ID della Canvas per ottenere l'Id della textarea
                        var editorName = editor.name.substr(0, editor.name.length - ckeditorIntegrationCanvasIdSuffix.length);
                        isc.logEcho(editorName)
                        eval(editorName).save();
                    },
                    canUndo : true
                });

            /*
             editor.addCommand(pluginName, 
             new CKEDITOR.dialogCommand(pluginName)

             );
             */

            editor.ui.addButton('Isc_save',
                {
                    label: 'Save',
                    command: pluginName,
                    className : 'cke_button_save'
                });
        }
    });

finally, in my jsp:

<script type="text/javascript">
var ckeditorIntegrationCanvasIdSuffix = '_ta';
</script>
<script type="text/javascript" charset="UTF-8" src="./shared/ui/ckeditor/ckeditor.js"></script>
<script type="text/javascript" charset="UTF-8" src="./shared/ui/com/juve/classes/ckeditor/CkeditorIntegration.js"></script>

[claudiobosticco]

added to the wiki:
http://wiki.smartclient.com/display/Main/ckeditor+3.6.1+integration+in+SmartClient+8.2

[alexbrent]

Thanks for all this information. Will update on how I get along with it.