1. #1
    Ext JS Premium Member
    Join Date
    Jun 2011
    Posts
    253
    Vote Rating
    7
    ontho is on a distinguished road

      0  

    Default Another Ext.ux.form.TinyMCE

    Another Ext.ux.form.TinyMCE


    Hello,

    I know there are some solutions around for using a tinyMce-Editor with ExtJs 4, but I needed a class which is able to handle several different tinyMce-configs on one form. So here is my approach, any feedback is welcome.

    Code:
    Ext.define('Ext.ux.form.TinyMCE',   
    {    extend:'Ext.form.TextArea',
        alias: 'widget.xtinymce',
        
        tinyMceConfig: {}, // Config for this tinyMce-Instance
        saveFunc: null,    // Function called when pressing the save-button of tis tinyMce. If not set and this tinyMce-field is inside a form, the form is submitted.
        
        onRender: function (ct, position) 
        {    if (this.id === undefined) this.id = this.name;
            this.callParent(arguments);
            this.initTinyMce();
        },
    
        getSubmitValue: function()
        {    return this.getValue();
        },
        
        getValue : function()
        {    if (this.inputEl && tinymce && tinymce.EditorManager && tinymce.EditorManager.get(this.inputEl.id))
            {    this.value = tinymce.EditorManager.get(this.inputEl.id).getContent();
            }
            return this.value;
        },
        
        setValue : function(value)
        {    if (value === null || value === undefined) value = "";
            if (this.inputEl && tinymce && tinymce.EditorManager && tinymce.EditorManager.get(this.inputEl.id))
            {    tinymce.EditorManager.get(this.inputEl.id).setContent(value);
            }
            this.value = value;
            if (this.inputEl) this.inputEl.dom.value = value;
        },
        
        initTinyMce: function()
        {    var standardConfig = {
                mode : 'exact',
                elements: this.inputEl.id,
                theme : "advanced",
                plugins : "safari,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 :
                    "save,newdocument,separator,undo,redo,separator,"+ // cancel
                    "cut,copy,paste,pastetext,pasteword,separator,"+            
                    "bold,italic,underline,blockquote,strikethrough,sub,sup,separator,help",
    
                theme_advanced_buttons2 :
                    "justifyleft,justifycenter,justifyright,justifyfull,separator,"+
                    "bullist,numlist,outdent,indent,separator,"+
                    "link,unlink,image,media,advhr,separator,charmap,separator,pagebreak,separator,code",
                
                theme_advanced_buttons3 :
                    "tablecontrols,separator,fullscreen,separator,styleprops,forecolor,backcolor", // preview,
                        
                theme_advanced_buttons4 :
                    "styleselect,formatselect,separator,fontselect,fontsizeselect,removeformat,cleanup",
    
                theme_advanced_toolbar_location : "top",
                theme_advanced_toolbar_align : "left",
                theme_advanced_path_location : "bottom",
                    plugin_insertdate_dateFormat : "%Y-%m-%d",
                    plugin_insertdate_timeFormat : "%H:%M:%S",
                theme_advanced_resize_horizontal : false,
                theme_advanced_resizing : false,
                width : "100%",
                theme_advanced_source_editor_width : "600",
                height: "100%",
    
                class_filter : Ext.bind(this.onFilterClass, this),
                save_onsavecallback : Ext.bind(this.onSave, this)
            }
            
            var config = this.tinyMceConfig;
            Ext.apply(config, standardConfig);
            
            tinyMCE.init(config);
        },
        
        // Called when the user presses the save-button in tinyMce
        onSave: function()
        {    if (this.saveFunc)
            {    this.saveFunc();
            }
            else
            {    var form = this.up('form');
                if (form)
                {    form.submit();
                }
            }
        },
    
        // Called when the css-classes are shown 
        onFilterClass: function(cls, rule) 
        {    // return false or otherClassName
            return cls;
        }
    });

  2. #2
    Ext JS Premium Member
    Join Date
    Jan 2011
    Location
    Austin, TX
    Posts
    112
    Vote Rating
    0
    zillabyte is on a distinguished road

      0  

    Default


    ontho,
    I'm trying to use your plugin but I can't seem to get it to work in my situation. I'm opening a window with only the plugin and trying to set the initial value but the textarea is blank. here is my code:

    PHP Code:

       
    //-- TEXTAREA IMPLEMENT
       
    Ext.create('Ext.window.Window', {
        
    title'Editor',
        
    height700,
        
    width980,
        
    layout'fit',
        
    modaltrue,
        
    items: {
         
    xtype'xtinymce'
         
    borderfalse
         
    name'ContentData'
         
    id'ContentData'
         
    data'THIS IS MY HTML FOR TINYMCE'
        
    }
       }).
    show(); 
    Also the size of the editable area is incorrect. Can you help with this?

  3. #3
    Ext JS Premium Member
    Join Date
    Jan 2011
    Location
    Austin, TX
    Posts
    112
    Vote Rating
    0
    zillabyte is on a distinguished road

      0  

    Default


    Okay, I believe I got this working. It looks like the value was trying to be set before the tinymce object was being initialized so the inputEl was not set when the setValue method was being called. Also, the hieght and width wasn't working correctly with the h/w set at 100%. So, I changed a couple of things to set the h/w from the config options. I also added the afterRender, which I think reapplies the config since when I opened and closed the window, then reopened again the editor was not sized right. Not sure if this was best way to fix it but it now works for me.

    Using the control:

    PHP Code:
    Ext.create('Ext.window.Window', {
        
    title'Editor',
        
    height700,
        
    width980,
        
    //layout: 'fit', DONT USE A LAYOUT
        
    resizablefalse,
        
    modaltrue,
        
    items: {
            
    xtype'xtinymce'
            
    borderfalse
            
    name'ContentData'
            
    id'ContentData'
            
    height650
            
    width968
            
    value'MY HTML DATA'
        
    },
        
    listeners: {
            
    scopethis,
            
    beforeclose: {
                
    fn: function (pnloptions) {
                    var 
    Ext.getCmp('ContentData');
                    
    me.updateContent(d);
                }
            }
        }
    }).
    show(); 
    Full ux with my changes:

    PHP Code:
    Ext.define('Ext.ux.form.TinyMCE', { 
        
    extend'Ext.form.TextArea',
        
    alias'widget.xtinymce',

        
    tinyMceConfig: {}, // Config for this tinyMce-Instance
        
    saveFuncnull,    // Function called when pressing the save-button of tis tinyMce. If not set and this tinyMce-field is inside a form, the form is submitted.

        
    onRender: function (ctposition) {
            if (
    this.id === undefinedthis.id this.name;
            
    this.callParent(arguments);
            
    this.initTinyMce();
        },

        
    getSubmitValue: function () {
            return 
    this.getValue();
        },

        
    getValue: function () {
            if (
    this.inputEl && tinymce && tinymce.EditorManager && tinymce.EditorManager.get(this.inputEl.id)) {
                
    this.value tinymce.EditorManager.get(this.inputEl.id).getContent();
            }
            return 
    this.value;
        },

        
    setValue: function (value) {
            if (
    value === null || value === undefinedvalue "";
            if (
    this.inputEl && tinymce && tinymce.EditorManager && tinymce.EditorManager.get(this.inputEl.id)) {
                
    tinymce.EditorManager.get(this.inputEl.id).setContent(value);
            }
            
    this.value value;
            if (
    this.inputElthis.inputEl.dom.value value;
        },

        
    initTinyMce: function () {
            var 
    me this;
            var 
    standardConfig = {
                
    mode'exact',
                
    elementsthis.inputEl.id,
                
    theme"advanced",
                
    plugins"safari,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:
                    
    "save,newdocument,separator,undo,redo,separator," // cancel
                    
    "cut,copy,paste,pastetext,pasteword,separator," +
                    
    "bold,italic,underline,blockquote,strikethrough,sub,sup,separator,help",

                
    theme_advanced_buttons2:
                    
    "justifyleft,justifycenter,justifyright,justifyfull,separator," +
                    
    "bullist,numlist,outdent,indent,separator," +
                    
    "link,unlink,image,media,advhr,separator,charmap,separator,pagebreak,separator,code",

                
    theme_advanced_buttons3:
                    
    "tablecontrols,separator,fullscreen,separator,styleprops,forecolor,backcolor"// preview,

                
    theme_advanced_buttons4:
                    
    "styleselect,formatselect,separator,fontselect,fontsizeselect,removeformat,cleanup",

                
    theme_advanced_toolbar_location"top",
                
    theme_advanced_toolbar_align"left",
                
    theme_advanced_path_location"bottom",
                
    plugin_insertdate_dateFormat"%Y-%m-%d",
                
    plugin_insertdate_timeFormat"%H:%M:%S",
                
    theme_advanced_resize_horizontalfalse,
                
    theme_advanced_resizingfalse,
                
    //width: "100%",
                
    theme_advanced_source_editor_width"600",
                
    //height: "100%",
                
    widthme.width,
                
    heightme.height,

                
    class_filterExt.bind(this.onFilterClassthis),
                
    save_onsavecallbackExt.bind(this.onSavethis),
                
    file_browser_callbackExt.bind(this.onInsertImagethis)

            }

            var 
    config this.tinyMceConfig;
            
    Ext.apply(configstandardConfig);

            
    tinyMCE.init(config);

            var 
    me this;
            
    me.setValue(me.value);
        },

        
    //-- after component render
        
    afterRender: function () {
            
    this.callParent(arguments);
        },

        
    // Called when the user presses the save-button in tinyMce
        
    onInsertImage: function () {
            
    alert('InsertImage');
        },

        
    // Called when the user presses the save-button in tinyMce
        
    onSave: function () {
            if (
    this.saveFunc) {
                
    this.saveFunc();
            }
            else {
                var 
    form this.up('form');
                if (
    form) {
                    
    form.submit();
                }
            }
        },

        
    // Called when the css-classes are shown 
        
    onFilterClass: function (clsrule) {    // return false or otherClassName
            
    return cls;
        }
    }); 

Thread Participants: 1

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