jQuery UI, ExtJs integration

Yes, providing integration for javascript frameworks, CMS, blogs and everything that you can think of it's very useful and interesting, but don't forget the most important point: the person that does the integration must be a user of the end system, he must know the way it works, how the preferences should be exposed, what kind of installation steps can be done.

Let's imagine that I say, Ok, I'm gonna integrate it in ExtJS, first I would need to spend a time downloading, testing and reading just how ExtJS works, then I will move to read the docs about how to do the integration and write the code.
That's all?
Not of course, now I have to use it, to test that it works. Provide it to the ExtJS community and listen to their feedback, adjust whatever problem arises, bring new features in the integration per user's request.
And when a new version of FCKeditor is released then I must go back to that integration and verify that everything keeps working, add the new features to the preferences...

Just for one framework

Meanwhile I couldn't have helped in the main core, and I can bet that doing a proper integration with any framework does it takes more than just some hours, add now the support time after the integration is released.

As I said, if you want integration you can't ask just one side. The people that use that framework and are interested in this code are the ones that should move forward in order to have a great system.

Check this page: http://docs.fckeditor.net/FCKeditor_2.x ... tion/Other for example the WordPress integration. He is a user, so he knows what he wants and how it must be done. He keeps it updated.
If someone is hired just to make an integration he will do whatever it's spec'ed and then he will forget about it.

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.

Hi Guys,

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?

RE: http://www.fyneworks.com/jquery/FCKEditor/

Cheers,
Diego A.

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?

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

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.

It's been a while but hey, I've finally done it.

I've just released the very first version of my new CKEditor plugin for jQuery:
http://www.fyneworks.com/jquery/CKEditor/

I only started working on it today, but soon enough I hope to turn it into a complete interface between jQuery and CKEditor's API methods.

The most important thing the plugin does is take care of ajax submissions, reading the editor's output before the ajax call is made AND clearing old editor objects from memory, in an environment when editors are created and destroyed on the fly (my cms for example).