1. #1
    Sencha Premium Member MaximGB's Avatar
    Join Date
    Jun 2007
    Location
    Moscow, Russia
    Posts
    506
    Vote Rating
    5
    MaximGB is on a distinguished road

      0  

    Default [2.x] Ext.ux.form.TinyMCE

    [2.x] Ext.ux.form.TinyMCE


    Hi, just created form field component wrapper for TinyMCE.
    Tested (not hardly) on:
    FF 2.0.0.12
    Opera 9.22
    MSIE 7.x
    Requirements:
    TinyMCE 3.0.1

    PHP Code:
    Ext.namespace('Ext.ux.form');
    /**
     * @class Ext.ux.form.TinyMCE
     * @author Maxim Bazhenov (http://www.max-bazhenov.com)
     */
    Ext.ux.form.TinyMCE Ext.extend(Ext.form.TextArea, {

      
    autoCreate true,
      
      
    editor_config null,
      
      
    editor null,
      
      
    editor_rendered false,
      
      
    fs_patch_settings null,
      
      
    initComponent : function()
      {
        
    Ext.ux.form.TinyMCE.superclass.initComponent.call(this);
      },
      
      
    onRender : function(ctposition)
      {
        
    Ext.ux.form.TinyMCE.superclass.onRender.call(thisctposition);
        
        if (
    tinymce) {
          var 
    defaults Ext.apply({}, tinymce.EditorManager.settings);
          
    defaults.id this.id;
          
    this.editor = new tinymce.Editor(
            
    this.id
            
    Ext.apply(
              
    defaults
              
    Ext.applyIf(this.editor_config || {}, {add_form_submit_triggertrue})
            )
          );
          
          
    this.editor.onPreInit.add(this.onEditorPreInitthis);
          
    this.editor.onPostRender.add(this.onEditorPostRenderthis);
          
    this.editor.onExecCommand.add(this.onEditorExecCommandthis);
          
    this.editor.onBeforeExecCommand.add(this.onEditorBeforeExecCommandthis);
          
    this.editor.render();
        }
      },
      
      
    onEditorPreInit : function(ed)
      {
        
    // Setting custom showMenu handler
        
    var controls ed.controlManager.controlsctrl;
        for (var 
    ctl_id in controls) {
          
    ctrl controls[ctl_id];
          if (
    ctrl.showMenu) {
            
    ctrl.showMenu this.myMenuControlShowMenu.createDelegate(
              
    this, [ctrlctrl.showMenu], true
            
    );
          }
        }
        
        
    // Setting custom windowManager.open handler
        
    ed.windowManager.open this.myEditorWindowManagerOpen.createDelegate(
          
    this, [ed.windowManagered.windowManager.open], true 
        
    );
      },
      
      
    onEditorPostRender : function(edcm)
      {
        
    this.editor_rendered true;
        
    this.resizeEditor(this.el.getWidth());
        
    ed.load();
        
        
    Ext.fly(ed.getContainer()).on('focus'this.onFocusthis);
        
    Ext.fly(ed.getContainer()).on('blur'this.onBlurthis);
        
    ed.onActivate.add(this.onFocusthis);
        
    ed.onDeactivate.add(this.onBlurthis);
        
        
    // Finding parent form and attaching to beforeaction
        
    var fp this.findFormPanel();
        if (
    fp) {
          
    fp.getForm().on('beforeaction'this.getValuethis);
        }
      },
      
      
    onEditorBeforeExecCommand : function(edcmduival)
      {
        
    // We should intercept the inline editor created with fullscreen plugin.
        
    if (cmd == 'mceFullScreen' && !this.editor.getParam('fullscreen_new_window')) {
            
    this.fs_patch_settings Ext.apply({}, tinymce.EditorManager.settings);
          
    tinymce.EditorManager.add this.myEditorManagerAdd.createDelegate(
            
    this, [tinymce.EditorManager.add], true
          
    );
        }
      },
      
      
    onEditorExecCommand : function(edcmduival)
      {
        if (
    cmd == 'mceFullScreen') {
          var 
    active_win Ext.WindowMgr.getActive();
          var 
    fs_cont Ext.fly('mce_fullscreen_container');
          if (
    fs_cont && active_win) {
            
    fs_cont.setStyle('z-index'active_win.lastZIndex 5);
          }
          
    tinymce.EditorManager.settings Ext.apply({}, this.fs_patch_settings);
          
    this.fs_patch_settings null;
        }
      },
      
      
    myEditorManagerAdd : function(edoriginal)
      {
        
    ed.onPreInit.add(this.onEditorPreInitthis);
        
    tinymce.EditorManager.add original;
        return 
    original.call(tinymce.EditorManagered);
      },
      
      
    myEditorWindowManagerOpen : function(fpoWMoF)
      {
        var 
    active_win Ext.WindowMgr.getActive();
        if (
    active_win) {
          
    oWM.zIndex active_win.lastZIndex 10;
        }
        if (
    oF) {
            return 
    oF.call(oWMfp);
        }
        else {
            return 
    oWM.call(pf);
        }
      },
      
      
    myMenuControlShowMenu : function(eventctrloF)
      {
        
    oF.call(ctrlevent);
        var 
    active_win Ext.WindowMgr.getActive();
        if (
    active_win) {
          var 
    mEl Ext.fly('menu_' ctrl.id) || Ext.fly(ctrl.id '_menu') || (ctrl.menu Ext.fly('menu_' ctrl.menu.id) : null); 
          if (
    mEl) { 
            
    mEl.setStyle('z-index'active_win.lastZIndex 10);
          }
        }
      },
      
      
    resizeEditor : function(wh)
      {
        if (
    this.editor && this.editor_rendered) {
          var 
    cel Ext.fly(this.editor.getContainer());
          if (
    && h) {
            if (!
    Ext.isBorderBox) {
              
    -= cel.getBorderWidth('lr');
              
    -= cel.getBorderWidth('tb');
            }
            
    cel.setSize(wh);
          }
          else if (
    w) {
            if (!
    Ext.isBorderBox) {
              
    -= cel.getBorderWidth('lr');
            }
            
    cel.setWidth(w);
          }
          else if (
    h) {
            if (!
    Ext.isBorderBox) {
              
    -= cel.getBorderWidth('tb');
            }
            
    cel.setHeight(h);
          }
        }
      },
      
      
    setSize : function(wh
      {
        if (
    this.editor && this.editor_rendered) {
          
    this.resizeEditor(|| undefined|| undefined);
        }
        else {
          return 
    Ext.ux.form.TinyMCE.superclass.setSize.call(thiswh);
        }
      },
      
      
    getValue : function()
      {
        if (
    this.editor && this.editor_rendered) {
          
    this.editor.save();
        }
        return 
    Ext.ux.form.TinyMCE.superclass.getValue.call(this);
      },
      
      
    setValue : function(value)
      {
        
    Ext.ux.form.TinyMCE.superclass.setValue.call(thisvalue);
        if (
    this.editor && this.editor_rendered) {
          
    this.editor.load();
        }
      },
      
      
    focus : function()
      {
        if (
    this.editor) {
          
    this.editor.focus();
        }
        else {
          
    Ext.ux.form.TinyMCE.superclass.focus.call(this);
        }
      },
      
      
    onFocus : function()
      {
        
    Ext.ux.form.TinyMCE.superclass.onFocus.call(this);
        if (
    this.editor && this.editor_rendered) {
          
    Ext.fly(this.editor.getContainer()).addClass(this.focusClass);
        }
      },
      
      
    onBlur : function()
      {
        
    Ext.ux.form.TinyMCE.superclass.onBlur.call(this);
        if (
    this.editor && this.editor_rendered) {
          
    Ext.fly(this.editor.getContainer()).removeClass(this.focusClass);
        }
      },
      
      
    markInvalid : function(msg)
      {
        
    Ext.ux.form.TinyMCE.superclass.markInvalid.call(thismsg);
        if (
    this.editor && this.editor_rendered) {
          
    Ext.fly(this.editor.getContainer()).addClass(this.invalidClass);
        }
      },
      
      
    clearInvalid : function(msg)
      {
        
    Ext.ux.form.TinyMCE.superclass.clearInvalid.call(this);
        if (
    this.editor && this.editor_rendered) {
          
    Ext.fly(this.editor.getContainer()).removeClass(this.invalidClass);
        }
      },
      
      
    alignErrorIcon : function() 
      {
        if (
    this.editor && this.editor_rendered) {
          
    this.errorIcon.alignTo(this.editor.getContainer(), 'tl-tr', [20]);
        }
        else {
          
    Ext.ux.form.TinyMCE.superclass.alignErrorIcon.call(this);
        }
      },
      
      
    destroy : function()
      {
        if (
    this.editor) {
          
    this.editor.remove();
          
    this.editor null;
          
    this.editor_rendered false;
        }
        
    Ext.ux.form.TinyMCE.superclass.destroy.call(this);
      },
      
      
    findFormPanel : function()
      {
        var 
    owner this.ownerCt;
        while (
    owner && owner.xtype != 'form') {
          
    owner owner.ownerCt || null;
        }
        return 
    owner;
      }
    });

    Ext.reg('xtinymce'Ext.ux.form.TinyMCE); 
    Demo: http://www.max-bazhenov.com/dev/form-tinymce/index.php
    Attached Images
    Last edited by MaximGB; 20 Mar 2008 at 4:15 AM. Reason: Link to demo added.
    Use the force - read the source.

  2. #2
    Sencha Premium Member dawesi's Avatar
    Join Date
    Mar 2007
    Location
    Melbourne, Australia (aka GMT+10)
    Posts
    1,083
    Vote Rating
    44
    dawesi has a spectacular aura about dawesi has a spectacular aura about

      0  
    Teahouse Training Company
    Official Certified Sencha Trainer

    Australia / New Zealand / Singapore / Hong Kong & APAC



    SenchaWorld.com - Sencha webinars, videos, etc
    SenchaForge.org - (coming soon)
    TeahouseHQ.com - Sencha ecosystem training portal

    Code Validation : JSLint | JSONLint | JSONPLint

  3. #3
    Sencha Premium Member MaximGB's Avatar
    Join Date
    Jun 2007
    Location
    Moscow, Russia
    Posts
    506
    Vote Rating
    5
    MaximGB is on a distinguished road

      0  

    Default


    I know, but mine is
    1. working in Ext.Window;
    2. working with inlinepopup TinyMCE plugin
    3. provides custom configuration for each TinyMCE instance
    4. works correctly with multiple instances

    Use the force - read the source.

  4. #4
    Ext User
    Join Date
    Feb 2008
    Posts
    2
    Vote Rating
    0
    contex is on a distinguished road

      0  

    Default


    how can is add this ?

    can i see a example page or some ?

  5. #5
    Sencha Premium Member MaximGB's Avatar
    Join Date
    Jun 2007
    Location
    Moscow, Russia
    Posts
    506
    Vote Rating
    5
    MaximGB is on a distinguished road

      0  

    Default


    You should use this extension like any other form field, and don't forget to include TinyMCE scripts in you page and do the TinyMCE.init() call.
    Use the force - read the source.

  6. #6
    Ext User Lester Burlap's Avatar
    Join Date
    Jul 2007
    Location
    Richardson, Texas
    Posts
    27
    Vote Rating
    0
    Lester Burlap is on a distinguished road

      0  

    Default


    Howdy:

    Just checking -- does this fall under the same license as Ext?

    Thanks so much...

    LBB

  7. #7
    Sencha Premium Member MaximGB's Avatar
    Join Date
    Jun 2007
    Location
    Moscow, Russia
    Posts
    506
    Vote Rating
    5
    MaximGB is on a distinguished road

      0  

    Default


    I didn't think about license, let's say I permit to use it anywhere if my authorship note will not be removed from the code.
    Use the force - read the source.

  8. #8
    Sencha Premium Member cmendez21's Avatar
    Join Date
    Jun 2007
    Location
    Mexico D.F.
    Posts
    479
    Vote Rating
    1
    cmendez21 is on a distinguished road

      0  

    Default



    awesome plug-in just what i needed to finish some chaotic forms
    Nice Work and Keep it up..!

  9. #9
    Sencha Premium Member cmendez21's Avatar
    Join Date
    Jun 2007
    Location
    Mexico D.F.
    Posts
    479
    Vote Rating
    1
    cmendez21 is on a distinguished road

      0  

    Default


    HI again i have a few observations

    If use Ext.GetCmp('ideditor').getValue(); doesnt return any value its empty

    If i use var valuedata = tinyMCE.activeEditor.getContent();
    it appears the right value but it could be nicer and easier way to get it by getValue() by the plugin code and also what happens if you got 2 or more editors but how to get the right value

    i also used tinyMCE.get('ideditor').getContent() and no value always appears empty

  10. #10
    Sencha User
    Join Date
    Mar 2007
    Posts
    160
    Vote Rating
    0
    alindsay55661 is on a distinguished road

      0  

    Default


    When I use this I get TinyMCE is not defined in reference to my init call. However the editor works. Any suggestions?