Hybrid View

  1. #1
    Sencha User
    Join Date
    Feb 2010
    Posts
    353
    Vote Rating
    4
    maneljn is on a distinguished road

      0  

    Default Tinymce with Ext 4.0.7

    Tinymce with Ext 4.0.7


    Anyone has working tinymce v 3.4.6 with extjs v 4.0.7
    I have working it with extjs 4.0.2a but now with 4.0.7 i have an error in getLabelableSelectors() function in Ext.ux.form.TinyMCE.js

  2. #2
    Sencha User
    Join Date
    Feb 2010
    Posts
    353
    Vote Rating
    4
    maneljn is on a distinguished road

      0  

    Default


    code for Ext.ux.form.TinyMCE of fkportfolio.com

    Code:
    Ext.define('Ext.ux.form.TinyMCE', {
        extend: 'Ext.Component',
        mixins: {
            labelable: 'Ext.form.Labelable',
            field: 'Ext.form.field.Field'
        },
        alternateClassName: ['Ext.form.TinyMCE'],
        alias: 'widget.tinymcefield',
        
        fieldSubTpl: [
            '<textarea id="{id}" ',
                '<tpl if="name">name="{name}" </tpl>',
                'tabIndex="-1" ',
                'class="{fieldCls}" autocomplete="off" />',
            '</textarea>',
            {
                compiled: true,
                disableFormats: true
            }
        ],
        
        hideMode: 'offsets',
        fieldCls: Ext.baseCSSPrefix + 'tinymce-field',
    
        constructor: function(config) {
            var me = this;
            
            // The default configuration to use is none is specified
            var edDefault = {
                mode: 'none',
                theme: 'advanced',
                plugins: 'autolink,lists,spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template',
                theme_advanced_buttons1: 'newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect',
                theme_advanced_buttons2: 'cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor',
                theme_advanced_buttons3: 'tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen',
                theme_advanced_buttons4: 'insertlayer,moveforward,movebackward,absolute,|,styleprops,spellchecker,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,blockquote,pagebreak',
                theme_advanced_toolbar_location: 'top',
                theme_advanced_toolbar_align: 'left',
                theme_advanced_statusbar_location: 'bottom',
                skin: 'o2k7'
            };
            
            // Apply any user specified tinymceInit configurations
            config.tinymceInit = config.tinymceInit || {};
            Ext.applyIf(config.tinymceInit, edDefault);
            
            // Init values we do not want changed
            config.tinymceInit.mode = 'none';
    
            me.callParent(arguments);
        },
        
        initComponent: function() {
            var me = this;
            
            // Add events?
            
            me.callParent(arguments);
            
            // Init mixins
            me.initLabelable();
            me.initField();
            
            // Set name to id id one is not set
            if (!me.name) {
                me.name = me.getInputId();
            }
        },
        
        getInputId: function() {
            return this.name || (this.name = Ext.id());
        },
        
        getSubTplData: function() {
            var me = this,
                inputId = me.getInputId();
    
            return {
                id: inputId,
                fieldCls: me.fieldCls,
                name: me.name || inputId
            };
        },
    
        getSubTplMarkup: function() {
            return this.getTpl('fieldSubTpl').apply(this.getSubTplData());
        },
    
        initRenderTpl: function() {
            var me = this;
            if (!me.hasOwnProperty('renderTpl')) {
                me.renderTpl = me.getTpl('labelableRenderTpl');
            }
            return me.callParent();
        },
    
        initRenderData: function() {
            return Ext.applyIf(this.callParent(), this.getLabelableRenderData());
        },
        
        onRender: function() {
            var me = this,
                inputId = me.getInputId(),
                renderSelectors = me.renderSelectors;
                
            Ext.applyIf(renderSelectors, me.getLabelableSelectors());
    
            Ext.applyIf(renderSelectors, {
                textareaEl: '.' + me.fieldCls
            });
    
            me.callParent(arguments);
            
            // Default value for textarea
            me.setRawValue(me.rawValue);
            
            // Render and add editor
            // http://tinymce.moxiecode.com/wiki.php/API3:class.tinymce.Editor
            me.ed = new tinymce.Editor(inputId, me.tinymceInit);
            me.ed.render();
    
    //        this.on('resize', this.onResize, this);
        
        },
        
        getSubmitValue: function() {
            return this.processRawValue(this.getRawValue());
        },
    
        getRawValue: function() {
            var me = this,
                value;
            
            // Sync textarea with editor content if initialized    
            if (me.ed && me.ed.initialized) {
                me.ed.save();
            }
            
            value = me.textareaEl? me.textareaEl.getValue() : Ext.value(me.rawValue, '');
            me.rawValue = value;
            return value;
        },
    
        setRawValue: function(value) {
            var me = this;
            value = Ext.value(value, '');
            me.rawValue = value;
            
            // Some Field subclasses may not render an textareaEl
            if (me.textareaEl) {
                me.textareaEl.dom.value = value;
            }
            
            // Sync editor with textarea if initialized    
            if (me.ed && me.ed.initialized) {
                me.ed.setContent(value);
            }
            return value;
        },
    
        valueToRaw: function(value) {
            return '' + Ext.value(value, '');
        },
    
        rawToValue: function(rawValue) {
            return rawValue;
        },
    
        processRawValue: function(value) {
            return value;
        },
        
        reset: function() {
            this.setValue('');
        },
    
        getValue: function() {
            var me = this,
                value = me.rawToValue(me.processRawValue(me.getRawValue()));
            me.value = value;
            return value;
        },
    
        setValue: function(value) {
            var me = this;
            me.setRawValue(me.valueToRaw(value));
            return me.mixins.field.setValue.call(me, value);
        },
        
        toggleEditor: function() {
            tinymce.execCommand('mceToggleEditor', false, this.name);
        }
    });

  3. #3
    Ext JS Premium Member
    Join Date
    Dec 2011
    Location
    Norway
    Posts
    27
    Vote Rating
    0
    tiago.teixeira is on a distinguished road

      0  

    Default Re:

    Re:


    Hey!

    Did u manage to fix it?

    Cheers!

  4. #4
    Sencha Premium Member harrydeluxe's Avatar
    Join Date
    Jul 2007
    Location
    N├╝rnberg, Germany
    Posts
    78
    Vote Rating
    29
    harrydeluxe has a spectacular aura about harrydeluxe has a spectacular aura about

      1  

    Default


    I had initially played with the above code. But then i found a better solution. The results are now here available:

    https://github.com/harrydeluxe/extjs-ux/

    And here a working demo:


    http://harrydeluxe.github.com/extjs-...m/tinymce.html
    Last edited by harrydeluxe; 18 May 2012 at 9:25 PM. Reason: move to gh-pages branch
    DELACAP | Github
    "don't code today what you can't debug tomorrow"

  5. #5
    Ext JS Premium Member
    Join Date
    Dec 2011
    Location
    Norway
    Posts
    27
    Vote Rating
    0
    tiago.teixeira is on a distinguished road

      0  

    Default


    Great stuff! Awesome work you have made, Thanks for sharing! Btw, I fck love your quote

    Cheers!

  6. #6
    Sencha User
    Join Date
    Aug 2010
    Posts
    11
    Vote Rating
    0
    craigsimons is on a distinguished road

      0  

    Default Solid Work

    Solid Work


    I'd always assumed that the built-in htmleditor was more than sufficient... until I used it. Thank you (and all the work of the others involved) for providing an alternative that I can use!