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

[Qtx]

Hi,

nice idea.

Where is the error element is placed? Can you give the screenshot?

What is MyTitleTextfield? Did you introduced a special field for error displaying?

[SommerEngineering]

My trick/nip is, that I have a TextField before the editor (see screenshot; its the MyTitleTextfield). Its the topic / subject for the body like e.g. for an e-mail. Then I know that the position of the warning sign (visible or not does not matter) of this textfield is correct. So I use the X position of the sign from the textfield also for the editor.

tinyMCE-extjs.png

[SommerEngineering]

A more common solution would be to dynamically get the child before the editor or the parent of the editor and use his X position of his warning sign Okay, its a bad hack but it works fine...

[Qtx]

OK. It can be done also without additional fields. When you switch the editor to the textarea while it is invalid, you will see the error sign behind this in the top right corner. You can shift it a little bit to the right like in your example.

But there is not always enough free place, e.g. in my demo example there is no place.

I will think about a general solution.

[SommerEngineering]

In my example, the free space on the right side (between form elements and border of the window) comes not by me. Its automatically added by ExtJS. I think it comes from my fieldDefaulds of the form where I use msgTarget: 'side'.

Thanks that you try to build a common solution

[Qtx]

New version 2.2

Fixed bug with the validation behavior. Now, if the validateOnChange is true, the contents is validated upon leaving the editor.

PS
The problem of the displaying of the error message is still not solved.

[HTK]

I had a problem with the textarea width because I am using a fieldLabel. I saw that in the version 2.2 of the TinyMCETextArea.js he is recalculating the width if there is a label. At line 350 in the me.on('resize'....

if(elm.hasVisibleLabel())
      {
          width = width - (elm.labelWidth + elm.labelPad);
      } 

I guess this is not required if the label is on top of the field while it is required when label is left. So my problem was he subtracted the width of the label while it is above the field and so the mce editor isn´t displayed with full width. I fixed it with a check like this:

if(elm.hasVisibleLabel() && elm.labelAlign == 'left')
      {
          width = width - (elm.labelWidth + elm.labelPad);
      } 

Maybe this is an optimalization for future. This is a nice feature, hope this post makes it even better.

[Qtx]

Thank you for your note! I will take it into the next release.

[Qtx]

New version 2.3

Fixed bug with labelAlign=top

[HTK]

Hey Qtx, thx for the new release. That is fast. Could you describe what would be the best practice to implement a custom plugin for the toolbar. While watching your code it is not very clear to me how to do that. In my case I need to seperate my custom plugins from the original. I want to place them in different folder. How to achieve this ?