[Updated] Ext.ux.TinyMCE - TinyMCE form field (v0.7b1)

[Dumbledore]

I've added it to the trunk.

BTW, have you checked - maybe it's enough to simply set startContent to the value of setValue parameter?

yes i check it, but it won

[xor]

I've updated the component, grab it here:
http://blogs.byte-force.com/media/g/...e/default.aspx

* Fixed issue with [non]inline dialogs when used in onReady().
* Added isDirty().

[basti]

hi!

anyone used the external toolbar feature?

theme_advanced_toolbar_location : "external",

[AVerta]

Hi Dumbledore,

Thanks for your help. My code works now.

AVerta

[yaroslav]

Thanks for this great extension!
I found bug in ИЕ6-7.
When put on layout 2 editors my IE crashes

items: [{
                xtype: "tinymce",
                fieldLabel: "Rich text",
                id: "richText1",
                name: "richText1",
                width: 600,
                height: 200,
                tinymceSettings: {
                    theme : "advanced",
                    ...
                },
                value: "<h1>Demo</h1><p>Ext.ux.TinyMCE works...</p>"
            }, {
                xtype: "tinymce",
                fieldLabel: "Rich text",
                id: "richText2",
                name: "richText2",
                width: 600,
                height: 200,
                tinymceSettings: {
                    theme : "advanced",
                    ...
                },
                value: "<h1>Demo</h1><p>Ext.ux.TinyMCE works...</p>"
            }] 

Temporaty I removed this from function Ext.ux.TinyMCE > onRender

this.ed.onActivate.add( this.focus.createDelegate( this, [ false, false ], false )); 

How to fix this correctly?

[Dumbledore]

is here a css-guru? In my opinion we need a custom style for the TinyMCE Dialog-Buttons. The buttons are so different to the Ext.Buttons and a little bit ugly when rendering inside a Dialog...

[xor]

...
Temporaty I removed this from function Ext.ux.TinyMCE > onRender

this.ed.onActivate.add( this.focus.createDelegate( this, [ false, false ], false )); 

How to fix this correctly?

Yaroslav, let's for now proceed with your solution. Focusing on editor activation anyway was working not very well. And I'm not sure if it's necessary at all.

[xor]

is here a css-guru? In my opinion we need a custom style for the TinyMCE Dialog-Buttons. The buttons are so different to the Ext.Buttons and a little bit ugly when rendering inside a Dialog...

Dumbletore, nothing really "guruish" is necessary for this. Take o2k7 skin as a base and with help of Firebug twik it. Firebug shows even line in css file where specific class resides. So it's very simple to find things to be modified. Most likely, you'll need only to modify toolbar backgrounds. Dialog also could be modified to be more Ext-like.

[Pagebaker]

First of all, very nice component!

I've made a small addition to the windowmanager which allows me to add regular panels/grids what ever to the popup window, instead of loading content in an iframe.

            open : function( s, p ) {
                
                var items = s.items || [{
                    xtype: "iframepanel",
                    defaultSrc: s.url || s.file
                }];
                
                s = s || {};
                p = p || {};
                
                s.width = parseInt(s.width || 320);
                s.height = parseInt(s.height || 240) + (tinymce.isIE ? 8 : 0);
                s.min_width = parseInt(s.min_width || 150);
                s.min_height = parseInt(s.min_height || 100);
                s.max_width = parseInt(s.max_width || 2000);
                s.max_height = parseInt(s.max_height || 2000);
                s.movable = s.resizable = true;
                p.mce_width = s.width;
                p.mce_height = s.height;
                p.mce_inline = true;

                this.features = s;
                this.params = p;
                        
                var win = new Ext.Window(
                {
                    title: s.name,
                    width: s.width,
                    height: s.height,
                    minWidth: s.min_width,
                    minHeight: s.min_height,
                    resizable: true,
                    maximizable: s.maximizable == true,
                    minimizable: s.minimizable == true,
                    modal: true,
                    layout: "fit",
                    items: items
                });
                
                p.mce_window_id = win.getId();
                
                win.show( null,
                    function() {
                        if( s.left && s.top ) 
                            win.setPagePosition( s.left, s.top );
                        var pos = win.getPosition();
                        s.left = pos[0];
                        s.top = pos[1];
                        this.onOpen.dispatch( this, s, p );
                    },
                    this
                );
                
                return win;
            },

Now you can create a window this way

                tinyMCE.activeEditor.windowManager.open({
                    title : 'My File Browser',
                    width : 420,  // Your dimensions may differ - toy around with them!
                    height : 400,
                    resizable : "yes",
                    inline : "yes",  // This parameter only has an effect if you use the inlinepopups plugin!
                    close_previous : "no",
                    items: [
                        new Ext.Panel({
                            field: field_name
                        })
                    ]
                }, {
                    window : win,
                    input : field_name
                });

[xor]

Pagebaker,

I glad you like this component. Can you explain in more details what are you getting with this scenario? Does it somehow differ from simply creating Ext.Window with your content?