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!

  7. #7
    Sencha User
    Join Date
    Aug 2008
    Posts
    31
    Vote Rating
    0
    Bodom78 is on a distinguished road

      0  

    Default


    Nice work Harry,

    The Google repo was me originally starting on a ux but it's been neglected for a while due to work.

    I have updated the repos home page with a link to your UX for future people looking to integrate TinyMCE.

  8. #8
    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

      0  

    Default


    Thank you.
    DELACAP | Github
    "don't code today what you can't debug tomorrow"

  9. #9
    Sencha Premium Member
    Join Date
    Jan 2012
    Posts
    2
    Vote Rating
    0
    ringline is on a distinguished road

      0  

    Default


    Nice ~~

  10. #10
    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

      0  

    Default


    Works now with 4.1.0
    See: https://github.com/harrydeluxe/extjs-ux/
    DELACAP | Github
    "don't code today what you can't debug tomorrow"

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi