jQuery UI, ExtJs integration

thatvetguy wrote:My offer stands. If you need help reaching to other communities for feedback and input, I would gladly help by posting posts like these in their forums or mailinglists.

spinal007 wrote:I'll be honest, I don't know much about the development of FCKeditor, but isn't this simply an issue of popular libraries such as jQuery providing plugins that can initialise and even manipulate FCKeditor through your existing API?

Replace the toolbar with Ext eq.
Replace all dialogs and forms with Ext eq.
Utilize built-in Ajax communication from Ext eq.
Utilize CKEditor's core functionality (XHTML code and WYSIWYG)
Use Ext style configuration
Apply Ext DOM interface to CKEditor

fredck wrote:More or less, yes. But, we want it to be clearer, better integrated and mainly "continuously supported". Also, there is a big difference. jQuery support would be part of CKEditor. So, you don't need a plugin for that. It would just work out of the box by adding jQuery and CKEditor to a page. The plugin will be embedded into the editor code (this will be configurable, of course).

digitalskyline wrote:I have been waiting to see 3.0 / and how things will be structured so that I can take a crack at the ExtJS integration. I currently have ExtJS and FCK running side-by-side...but this is not total integration (though it works quite well). My intentions will be:

Replace the toolbar with Ext eq.
Replace all dialogs and forms with Ext eq.
Utilize built-in Ajax communication from Ext eq.
Utilize CKEditor's core functionality (XHTML code and WYSIWYG)
Use Ext style configuration
Apply Ext DOM interface to CKEditor

Ext.ux.CKEditor will be applicable to any panel using xtype declaration {xtype:'CKEditor'}
Ext.ux.CKEditor will be applicable also as a Form item.

The advantage of this will be less code to download, and less code for Ext users will have to integrate. Ext has the advantage of already having adapters to JQuery, Prototype, YUI amongst others. So for me it makes the best sense to start here.

I have been using ExtJS since 1.1 - I have a solid foundation in its conventions and have built several applications and UX's on top of it. But I still need to bury myself in your code base to see where we can do the most damage


http://DigitalSkyline.com/media/images/captures/2008-10-18_1752.swf

<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all.js"></script>
<script type="text/javascript" src="../ckeditor_source.js"></script>
<script type="text/javascript">

    var sFCKeditorToolbar = 'Default';
    var sFCKeditorBasePath = '/ckeditor/';
    var sFCKeditorBaseHref = window.location;
    var sFCKeditorSkinPath = '/ckeditor/skins/default/';
    Ext.form.FCKeditor = function(config) {
        this.config = config;
        Ext.form.FCKeditor.superclass.constructor.call(this, config);
        this.FCKid = 0;
        this.MyisLoaded = false;
        this.MyValue = '';
    };

    Ext.extend(Ext.form.FCKeditor, Ext.form.TextArea, {
        onRender: function(ct, position) {
            if (!this.el) {
                this.defaultAutoCreate = {
                    tag: "textarea",
                    style: "width:100px;height:60px;",
                    autocomplete: "off"
                };
            }
            Ext.form.TextArea.superclass.onRender.call(this, ct, position);
            if (this.grow) {
                this.textSizeEl = Ext.DomHelper.append(document.body, {
                    tag: "pre", cls: "x-form-grow-sizer"
                });
                if (this.preventScrollbars) {
                    this.el.setStyle("overflow", "hidden");
                }
                this.el.setHeight(this.growMin);
            }
            if (this.FCKid == 0) this.FCKid = get_FCKeditor_id_value()
            setTimeout("loadFCKeditor('" + this.name + "'," + this.config.height + ");", 100);
        },
        setValue: function(value) {
            this.MyValue = value;
            if (this.FCKid == 0) this.FCKid = get_FCKeditor_id_value()
            FCKeditorSetValue(this.FCKid, this.name, value)
            Ext.form.TextArea.superclass.setValue.apply(this, [value]);
        },
        getValue: function() {
            if (this.MyisLoaded) {
                value = FCKeditorGetValue(this.name);
                Ext.form.TextArea.superclass.setValue.apply(this, [value]);
                return Ext.form.TextArea.superclass.getValue(this);
            } else {
                return this.MyValue;
            }
        },
        getRawValue: function() {
            if (this.MyisLoaded) {
                value = FCKeditorGetValue(this.name);
                Ext.form.TextArea.superclass.setRawValue.apply(this, [value]);
                return Ext.form.TextArea.superclass.getRawValue(this);
            } else {
                return this.MyValue;
            }
        }
    });

    Ext.reg('fckeditor', Ext.form.FCKeditor);

    function loadFCKeditor(element, height) {

        oFCKeditor = CKEDITOR.replace(element);
        oFCKeditor.config.height = height;
    }

    function FCKeditor_OnComplete(editorInstance) {
        Ext.getCmp(editorInstance.Name).MyisLoaded = true;
        editorInstance.Events.AttachEvent('OnStatusChange', function() {
            Ext.getCmp(editorInstance.Name).setValue();
        })

    }

    var FCKeditor_value = new Array();

    function FCKeditorSetValue(id, name, value) {
        if ((id != undefined) && (name != undefined)) {
            if (value != undefined) FCKeditor_value[id] = value;
            else if (FCKeditor_value[id] == undefined) FCKeditor_value[id] = '';
            var oEditor = CKEDITOR.instances[name];

            if (oEditor != undefined) oEditor.setData(FCKeditor_value[id])
        }
    }

    function FCKeditorGetValue(name) {
        if ((id != undefined) && (name != undefined)) {
            var oEditor = CKEDITOR.instances[name];
            data = '';
            if (oEditor != undefined) data = oEditor.getData()
            return data;
        }
    }

    var FCKeditor_id_value;

    function get_FCKeditor_id_value() {
        if (!FCKeditor_id_value) {
            FCKeditor_id_value = 0;
        }
        FCKeditor_id_value = FCKeditor_id_value + 1;
        return FCKeditor_id_value;
    }

    Ext.onReady(function() {
        var formEditor = new Ext.form.FormPanel({
            labelAlign: 'right',
            method: 'POST',
            buttonAlign: 'center',
            labelWidth: 1,
            frame: true,
            header: false,
            hideLabel: true,
            defaultType: 'textfield',
            items: [{
                xtype: 'fckeditor',
                name: 'web_editordiv',
                id: 'web_editordiv',
                hideLabel: true,
                height: 500
            }
         ]

        });
        formEditor.render('formDiv');
    });
    
</script>
<div id="formDiv"></div>

// In the above code I created a extension for CKEditor which is extended from TextArea of ExtJs and then a new type fckeditor is added to the Ext.form.FormPanel which is rendered to a DIV.
// In the code below I am adding this form to a Ext.TabPanel for the same form
<script type="text/javascript">
       // this is a object which is used for reference of tabs a object of Ext.TabPanel
        var ckEditorTabPanel = null;
        var ckDiv = null;

        Ext.onReady(function() {

            var tabs = new Ext.TabPanel({
                renderTo: 'tabs',
                resizeTabs: false, 
                enableTabScroll: true,
                width: 900,
                height: 525,
                defaults: { autoScroll: true }
            });

            ckEditorTabPanel = tabs;

            function loadDivEditor() {
                tabs.add({
                    title: 'CK Editor',
                    iconCls: 'tabs',
                    closable: false,
                    id: 'aa',
                    contentEl: 'formDiv'
                }).show();
            }

            loadDivEditor();
        });

        // this function will add the dialog to the panel and it will be called from /ckeditor/_source/plugins/dialog/plugins.js
        function addCKTabs(name) {
         ckDiv = null;
            if (ckEditorTabPanel != null) {
                ckDiv = name.$;
                if (ckDiv.id == undefined || ckDiv.id == "")
                    ckDiv.id = ckDiv.uniqueID;

                var tabTitle = ckDiv.uniqueID; // later replace with the title of dialog pop-up

                var tb = new Ext.TabPanel({
                    title: tabTitle,
                    iconCls: 'tabs',
                    closable: true,
                    contentEl: ckDiv
                });

                ckEditorTabPanel.add(tb).show();
            }
        }
       
</script>
<div id="tabs" style="margin:15px 0;">
</div>

        // Save the initial values of the dialog.
   this.foreach(function(contentObj) { contentObj.setInitValue && contentObj.setInitValue(); });

           if (window.parent != undefined && window.parent.ckEditorTabPanel != undefined) {
                   // remove the cover
               removeCover();
                   // call the function which will add this dialog to Ext.TabPanel
               window.parent.addCKTabs(this);
           }

fredck wrote:Right now, I think we should be concentrated on the CKEditor coding and on doing the first integration by ourselves. I've elected jQuery for this. In this way we can understand exactly which features we need in the editor to make such integration smooth and powerful.

Your words make a lot of sense thatvetguy. It's cool to have you here with us

relativityboy wrote:
I do have a thought about jQuery, why not use the jQuery core in yours? jQuery isn't a framework. It's a tool.