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

Ext.ux.form.TinyMCETextArea

ExtJS form field - a text area with integrated TinyMCE WYSIWYG Editor.

Version: 2.5
Release date: 29.03.2013
ExtJS Version: 4.2.0
TinyMCE Version: 3.5.8
License: Sencha, LGPL v2.1 or later

Subscribe to this topic to get informed about updates!

The integration is done by deriving from the Ext.form.field.TextArea.

Following issues are covered:

• Initialization in an initially visible and in an initially invisible tab.
• Correct place occupation by the initialization in any ExtJS layout.
• Correct resizing by the resizing of the underlying text area.
• Activation and deactivation of the WYSIWYG editor. Keeping of the cursor position by switching to the HTML text modus.
• Enabling and disabling of the WYSIWYG editor control.
• ReadOnly state support.
• Changing of WYSIWYG settings and CSS file for the editable contents on the fly.
• Pre-formatting of the HTML text in visible and invisible modus.
• Focusing of the WYSIWYG editor control.
• Marking invalid.
• Tracking dirty state.
• Skin "extjs" and the native ExtJS windows for the editor inline popups.
• Storing and restoring cursor position by inserting of a place holder over a popup window.

View Example

Download Sources and Demo

Implementation Details and Reference

Have a lot of fun!

Thank you for the contribution. You may also wish to add it to the Market Place:
http://market.sencha.com/

Regards,
Scott.

With 4.1 there is a bug and Text and TextArea do not resize. For the editor to work you need to do an override for TextArea as described :

http://www.sencha.com/forum/showthre...tom-form-field

This is a major bug, god knows why they are taking so long to fix it. Its wasted 3 hours of my time before I found this ticket, I wonder how many hours in total have been spent on this problem.

Nice component, by the way.

Tony

Hi Tony,

thank you for the feedback. I faced this problem while creation of the component with the release candidates of the 4.1. But, when the final release came out, I noticed that the resize event is fired and I was very glad.

At least, my example should work in all browsers. Maybe, the resize event in 4.1 is fired not in all cases or not in all layouts, or in other words, the bug is not fixed completely.

Due to the link you have give this bug is fixed, however if someone finds the case where the resize event not working, please let me to know, I will try to find the workaround for this case.

Puzzled why I need to call tinymce.triggerSave() before getting the value,is there some reason you did not call this in your getValue method.

Also is it possible to have multiple editors on a page?

1) triggerSave

The reason is the support of the HTML text modus, that is, the WYSIWYG is not visible, the text is entered directly into the text area. For some reason, when you typing into the text area, the method getValue is called every time you type a character. If I would call ed.save() , it overwrites the newly typed texts with that from the WYSIWYG.

If you do not need the HTML text modus, you can override the method getValue() like this

TinyMCETextArea.js

Code:

---

  getValue: function() {
    var me = this;
   
    if(me.wysiwygIntialized)
    {
      var ed = tinymce.get(me.getInputId());
      if(ed) ed.save();
    }
   
    return me.callParent(arguments);
  },

---

Interesting, that this component for ExtJS 3 also requires the call of the triggerSave().

http://www.sencha.com/forum/showthread.php?24787-Updated-Ext.ux.TinyMCE-TinyMCE-form-field-(v0.7b1)

Actually, I waited long time for the update to the version 4, but then decided to create my own.

2) Also is it possible to have multiple editors on a page?

Yes, there are no restrictions, and each editor may have own specific configuration. The demo example has two editors.

when i try to use setValue the second time it's not working. also in the demo the 'set some value' is not working, any suggestions what to do about this?

i use ExtJS 4.1 and Ext.ux.form.TinyMCETextArea 1.2
same thing in Chrome 19 and Firefox 12 on Ubuntu 11.10

this is my controller function:

Code:

---

  openTextEditor : function(event, element) {
    var me = this;
    me.currentTextElement = element;
   
    console.log(me.currentTextElement, 'me.currentTextElement');
   
    if(typeof me.textEditor === 'undefined')
      me.textEditor = me.getWorkspaceTextEditor();
     
    var textfield = me.textEditor.down('form').getForm().findField('content');
    textfield.setValue(me.currentTextElement.data.properties.content);
    me.textEditor.show();
  },

---

me.textEditor is a window component.
it seems like the first time setValue is called it is applied directly to the textfield and then loaded by tinymce on first load/show, but the setValue function from Ext.ux.form.TinyMCETextArea which is used on the second change is not working at all

Hi,

thanks for the bug report. I looks like I have introduced this bug by trying to eliminate the need to call the tinymce.triggerSave(). It was a bad idea. Now, I updated the version 1.3, there this bug is fixed. But, you have again to call tinymce.triggerSave() before getting the value over getValue() or before submission of the form.

Download the new version 1.3 from the same URL.

Regards

that was a quick response, thanks!

Quote:

---

Originally Posted by Qtx

Hi,

thanks for the bug report. I looks like I have introduced this bug by trying to eliminate the need to call the tinymce.triggerSave(). It was a bad idea. Now, I updated the version 1.3, there this bug is fixed. But, you have again to call tinymce.triggerSave() before getting the value over getValue() or before submission of the form.

Download the new version 1.3 from the same URL.

Regards

---

IE6-8 has a bug!