1. #1
    Sencha User
    Join Date
    Jun 2008
    Posts
    288
    Vote Rating
    16
    Qtx will become famous soon enough

      2  

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

    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.7
    Release date: 13.12.2013
    ExtJS Version: 4.2.1
    TinyMCE Version: 3.5.10
    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

    GitHub Project

    Have a lot of fun!

    Attention!


    The beta version of the TinyMCETextArea for the TimyMCE 4th generation is released. If you want to try out your application with the new TinyMCE editor, you can download the new version from

    http://www.point-constructor.com/en/tinyta4/

    and test directly under the following link:

    http://www.point-constructor.com/tinyta_demo4/

    GitHub Project
    Last edited by Qtx; 16 Dec 2013 at 12:54 PM. Reason: Latest versions of the Editor and ExtJS are used

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    8,636
    Vote Rating
    400
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


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

    Regards,
    Scott.

  3. #3
    Sencha User
    Join Date
    Aug 2008
    Posts
    49
    Vote Rating
    7
    TonySteele is on a distinguished road

      0  

    Default


    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

  4. #4
    Sencha User
    Join Date
    Jun 2008
    Posts
    288
    Vote Rating
    16
    Qtx will become famous soon enough

      0  

    Default


    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.

  5. #5
    Sencha User
    Join Date
    Aug 2008
    Posts
    49
    Vote Rating
    7
    TonySteele is on a distinguished road

      0  

    Default


    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?

  6. #6
    Sencha User
    Join Date
    Jun 2008
    Posts
    288
    Vote Rating
    16
    Qtx will become famous soon enough

      0  

    Default


    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.

  7. #7
    Sencha User
    Join Date
    Apr 2012
    Posts
    3
    Vote Rating
    0
    Novascreen is on a distinguished road

      0  

    Default


    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

  8. #8
    Sencha User
    Join Date
    Jun 2008
    Posts
    288
    Vote Rating
    16
    Qtx will become famous soon enough

      0  

    Default


    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

  9. #9
    Sencha User
    Join Date
    Apr 2012
    Posts
    3
    Vote Rating
    0
    Novascreen is on a distinguished road

      0  

    Default


    that was a quick response, thanks!

  10. #10
    Sencha User
    Join Date
    Dec 2011
    Posts
    7
    Vote Rating
    0
    m2276699 is on a distinguished road

      0  

    Default


    Quote Originally Posted by Qtx View Post
    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!

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar