1. #1
    Sencha User MaximGB's Avatar
    Join Date
    Jun 2007
    Location
    Moscow, Russia
    Posts
    493
    Vote Rating
    3
    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.
    My ExtJS extensions can be found here: http://max-bazhenov.com/dev/

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

      0  
    Senior Technical Training & Mentoring

    Teahouse Training Company
    Asia Pacific Region (Official Certified Sencha Trainer)

    Check out SenchaWorld.com - The best bits from the Sencha community (videos, blogs, etc)

    Code Validation : JSLint | JSONLint | JSONPLint

  3. #3
    Sencha User MaximGB's Avatar
    Join Date
    Jun 2007
    Location
    Moscow, Russia
    Posts
    493
    Vote Rating
    3
    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.
    My ExtJS extensions can be found here: http://max-bazhenov.com/dev/

  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 User MaximGB's Avatar
    Join Date
    Jun 2007
    Location
    Moscow, Russia
    Posts
    493
    Vote Rating
    3
    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.
    My ExtJS extensions can be found here: http://max-bazhenov.com/dev/

  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 User MaximGB's Avatar
    Join Date
    Jun 2007
    Location
    Moscow, Russia
    Posts
    493
    Vote Rating
    3
    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.
    My ExtJS extensions can be found here: http://max-bazhenov.com/dev/

  8. #8
    Sencha Premium Member cmendez21's Avatar
    Join Date
    Jun 2007
    Location
    Mexico D.F.
    Posts
    478
    Vote Rating
    0
    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
    478
    Vote Rating
    0
    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?

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