Ext.ux.form.TinyMCETextArea - a text area with integrated TinyMCE WYSIWYG Editor.

[Qtx]

Hi,

I added this part of code

    if (!tinymce.dom.Event.domLoaded) {
      tinymce.dom.Event.domLoaded = true;
    }

For setting the baseURL, I found the standard way which is offered by TinyMCE for your case

tiny_mce_src.js, line 40

            // TinyMCE .NET webcontrol might be setting the values for TinyMCE
            if (win.tinyMCEPreInit) {
                t.suffix = tinyMCEPreInit.suffix;
                t.baseURL = tinyMCEPreInit.base;
                t.query = tinyMCEPreInit.query;
                return;
            }

So, you have to set tinyMCEPreInit.base. Please try whether this solution works for you.

[ondra.cz]

Yes, you are rigth. But you have to set config

window.tinyMCEPreInit = {
    suffix : '',
    base : '/js/tinymce' // your path to tinyMCE
}; 

before tinyMCE editor is loaded, for example in application's launch function.

[Qtx]

New version 1.6

• Added support for dynamic loading only if required
• The version of the tinymce is replaced with the newest one 3.5.4.1

[jvisser]

How can I subscribe to the change event?

This doesn't work:me.
mon(me, 'change', function () { alert('change!'); });

I'll keep looking.

[Qtx]

I have checked this issue. The change event works only if the Editor is hidden. If the Editor is active, it does not.

The reason is that the editor is bound directly to the native textarea, not to the TextArea ExtJS object. All changes are saved directly to the textarea.

I will study the case to find out how to bound to the events of the TinyMCE and fire the corresponding ExtJS events.

Now, you can use work around - bind the onchange event directly to the text area.

[Qtx]

New version 1.7

• Added onchange event

Please note:

This function is called once the user "blurs" the area (in the same way a textarea or input field is blurred upon exiting that field) and it will check if a change has occurred. It will also fire when a new undo level is added to the queue. Undo levels are added when the user types text and then moves the cursor, performs an action like pressing the bold button while having text selected, or pressing return. There are many ways undo levels get added to the editor.

It is important to note that the onchange callback will not fire on each keystroke due to performance considerations.

http://www.tinymce.com/wiki.php/Conf...hange_callback

[jvisser]

The longer i'm using your ux component, the better it gets

When I put the Ext.ux.form.TinyMCETextArea editor in a Window, Panel or Container it's is slightly too high. Any idea why?

[jvisser]

Sorry,

Setting
theme_advanced_row_height: 27
like mentioned in the documentation fixes it.

[jvisser]

In the Ext.ux.form.TinyMCETextArea class there's a line of code that gets screwed up when minified


Look at the second line:


// we pass the height and width explicitly to the editor
me.tinyMCEConfig.width = me.lastWidth + +me.getWidthCorrection();
me.tinyMCEConfig.height = me.lastHeight;
There are 2 + with a space. It get's minified as ++ and that has a whole different meaning.


Can you fix that?


There are also 2 extranous commas at the last '}' of both classes. I think that shouldn't always be a problem.But I think the should be removed.

[Qtx]

Hi,

thank for the feedback I fixed it. But I could find only one extraneous comma. Where is the second? Could you tell me the line number of these commas.