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.

Yes, it "will" be great. I'm putting it in the future because, from my experience in other integration efforts, people don't give it much attention to it if they don't have code and examples to look at. So, as soon as we have things running at our side, we'll be able to do a massive integration attempt.

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

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

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

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

Hi I was searching the post related to ExtJs & FCKEditor and I came to this post.
I have a task to use the CKEditor with ExtJs which i successfully manage to integrate.
Now I want all dialog to be in Ext.TabPanel which i notice that you mentioned in your post.

I just want to know if you manage to do create dialogs in TabPanel.

I am very close to it and I can display dialog in tabs but click of Ok button doesn't work and I get a javascript error.

If you have done that can you please pass me some information how did you do that?

Thanks in advance.

<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

thatveguy has good words. I hope you're time has been well spent. I've come to the party rather late but I agree with him, and I applaud you for looking into jQuery as your first plugin...

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

jQuery UI on the other hand is a framework, and a not very mature one.

While integrating with jQuery UI will probably be an exorcise in frustration, the core is excellent, and syntax very light. It could encourage more manageable and understandable CK code.

--
P.S. I've only just started developing plugins for FCK.. while it's organic growth is pretty evident (ie painful) I'm very impressed with what you've done.

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.

Well, not everybody loves jQuery, each developer has its own point of view about how to work with javascript.
For example read this page explaining why some people prefer to work with jQuery and other people rather to work with MooTools: http://jqueryvsmootools.com/

And there are more frameworks out there, and not all of them are compatible with each other.

But the main reason is: most of the code is highly specialized for the editing part. The general javascript frameworks doesn't care at all about this kind of features so the code would need to be written anyway, only a very little set of features can be reused from a general framework.
And even if it could be reused, whenever a new bug is found you have to deal with the code of another project in order to get the fix that it's needed, it can create a dependency that make the project dependent on the schedule of another one.

So I really think that it's better to continue this way and then provide some integration hooks so the people that want it that way can use other frameworks, but by default provide an independent core.

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).