Ext.ux.form.TinyMCETextArea - a text area with integrated TinyMCE WYSIWYG Editor.

**talha06** · 3 Sep 2012 5:01 AM

@Qtx
Got it, thanks a lot for your reply..

**maneljn** · 21 Sep 2012 6:18 AM

i have a problem

When i define the control inside a tabpanel, it shows well but trunked the buttons in toolbars at default width field.

My tabpanel has a long width, and then the tinymce resizes (fits) very well, but the buttons are yet trunked.

**Qtx** · 21 Sep 2012 6:31 AM

Can you place a screenshot that illustrates the problem?

**maneljn** · 21 Sep 2012 6:53 AM

sorry i have changed yet my source code to use extjs htmleditor + this plugins
http://www.sencha.com/forum/showthre...ditor&p=890181

i explain litte more the problem....

Supose that default width of a field is 240 pixels (is an example measure)
Is all the buttons in tinymce that are in first row needs 400 pixels width. When the tinymcetextarea is showed, all the buttons on the right of 240 pixels are not showed, but the hole control fits well inside the tabpanel, i see blank space from point 240 to the rest of the tabpanel width.

Sorry about my english.

**Qtx** · 21 Sep 2012 7:12 AM

Well, the Ext.ux.form.TinyMCETextArea sticks exactly to the dimensions of the container TextArea. If the width of the textarea is 240px, then the width of the TinyMCETextArea will also be 240px even if there is a free space on the right. The TinyMCETextArea does not any place occupation by itself. It waits when the ExtJS system gives the place to the TextArea control and then adjust it to that size.

If you want to use this free area on the right, you have to increase the width of the TextArea and the editor will adjust to it.

**maneljn** · 21 Sep 2012 8:13 AM

Hello Qtx, thats my form

Code:

        // ---------------------------------------------------------------
        // Formulario para editar los registros
        // ---------------------------------------------------------------
        me.formularioAsignaturas = Ext.create('Ext.form.Panel', {
            name: 'formularioAsignaturas',
            border: false,
            bodyPadding: 10,
            hidden: false,
            autoScroll: true,
            fieldDefaults: {
                labelAlign: 'left',
                labelWidth: 125,
                labelStyle: 'font-weight:bold'
            },
            defaults: {
                margins: '0 0 5 0'
            },
            layout: 'fit',

            //                            
            // Campos del formulario
            //
            items: [{
                xtype: 'panel',
                title: '',
                border: false,
                layout: 'border',
        
                items: [{
                    xtype: 'panel',
                    border: false,
                    layout: 'anchor',
                    region: 'north',
                    items: [{
                        xtype: 'fieldset',
                        title: gt.dgettext('esiacademia','Datos generales'),
                        collapsible: true,
                        padding: '5 5 0 5',                        
                        items: [{
                            xtype: 'panel',
                            border: false,
                            layout: 'column',

                            items: [{
            
                                // Columna izquierda
                                xtype: 'container',
                                columnWidth:.75,
                                layout: 'anchor',
                                                                            
                                items: [{
                                    xtype: 'fieldcontainer',
                                    fieldLabel: '',
                                    labelSeparator: '',
                                    labelWidth: 0,
                                    layout: {
                                        type: 'hbox',
                                        pack: 'ratio',
                                        align: 'top'
                                    },
                                    anchor: '100%',
                                    defaultType: 'cesitextfield',
                                    fieldDefaults: {
                                        labelAlign: 'right',
                                        labelStyle: 'font-weight:bold;'
                                    },
                                    defaults: {
                                        margins: '0 5 0 0'
                                    },
                
                                    items: [{
                                        name: 'asig_nombre',
                                        xtype: 'cesitextfield',
                                        fieldLabel: gt.dgettext('esicontactos','Nombre'),
                                        labelAlign: 'left',
                                        labelWidth: 125,
                                        forzarMayusculas: true,                    
                                        enforceMaxLength: true,
                                        maxLength: 100,                    
                                        flex: 1,
                                        fieldCls: 'campo_obligatorio',
                                        allowBlank: false
                                    }, {
                                        name: 'asig_activo',
                                        xtype: 'checkboxfield',
                                        fieldLabel: gt.dgettext('esiacademia','Activo'),
                                        labelWidth: 75,
                                        margins: '0 0 0 0',    
                                        tabIndex: -1,    // Para que el cambio de campos con tabulador no se pare aqui 
                                        inputValue: '1'
                                    }]
                                }]


                            }, {
                                // Columna derecha
                                xtype: 'container',
                                columnWidth:.25,
                                layout: 'anchor'
                            }]

                        }]
                    }]

                // Parte inferior
                },{
                    xtype: 'panel',
                    border: false,
                    region: 'center',
                    layout: 'fit',
                    items: [{                    
                    
                        // Tab panel de subfichas
                        name: 'cto_tabpanel_subfichas',
                        xtype: 'esiacademia_view_tabpanelBase',
                        title: '',
                        border: true,
                        closable: false,
                        defaults: {
                            padding: '5 5 5 5',                        
                            layout: 'anchor'
                        },
                        items: [{

                            // Panel descripcion
                            xtype: 'esiacademia_view_panelSubfichaBase',
                            name: 'subfichaAsigDescripcion',
                            title: gt.dgettext('esiacademia','Descripción'),
                            layout: 'fit',
                            autoScroll: false,
                            margin: 5,
                            padding: 0,
                            items: [{    
                                xtype: 'tinymce_textarea',
                                name: 'asig_descripcion',
                                fieldLabel: '',
                                allowBlank: true,

                                tinymceInit: {
                                    theme : "advanced",
                                    skin: "extjs",
                                    language : "ca",
                                    // Original value is 23, hard coded.
                                    // with 23 the editor calculates the height wrong.
                                    // With these settings, you can do the fine tuning of the height
                                    // by the initialization.
                                    theme_advanced_row_height: 27,
                                    delta_height: 1,
                                    plugins: "autosize,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 options  (ancho estrecho)
                                    theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfullcut,|,copy,paste,pastetext,pasteword,|,bullist,numlist,|,forecolor,backcolor",
                                    theme_advanced_buttons2 : "", 
                                    theme_advanced_buttons3 : "", 
                                    theme_advanced_buttons4 : "", 
                                    theme_advanced_toolbar_location : "top",
                                    theme_advanced_toolbar_align : "left",
                                    theme_advanced_statusbar_location : "bottom",
                                    // FINAL Theme options
                                    plugin_insertdate_dateFormat : "%d-%m-%Y",
                                    plugin_insertdate_timeFormat : "%H:%M:%S",
                                    relative_urls : false
                                }
                            }]
                        }, {

                            // Panel contenidos y objetivos
                            xtype: 'esiacademia_view_panelSubfichaBase',
                            title: gt.dgettext('esiacademia','Contenidos y objetivos'),
                            layout: 'fit',
                            autoScroll: false,
                            items: [{
                                xtype: 'textareafield',
                                name: 'asig_observaciones',
                                autoScroll: true,
                                fieldLabel: gt.dgettext('esiacademia','Contenidos'),
                                allowBlank: true
                            }]
                        }, {

                            // Panel observaciones                            
                            xtype: 'esiacademia_view_panelSubfichaBase',
                            title: gt.dgettext('esiacademia','Observaciones'),
                            layout: 'fit',
                            autoScroll: false,
                            items: [{
                                xtype: 'textareafield',
                                name: 'asig_observaciones',
                                autoScroll: true,
                                fieldLabel: gt.dgettext('esiacademia','Observaciones'),
                                allowBlank: true
                            }]
                        }, {
                            // Panel informacion de registro
                            xtype: 'esiacademia_view_panelSubfichaBase',
                            title: ' ',   // Dejar un espacio en blanco en el titulo.
                            iconCls: 'icono_informacion',
                            items: [{
                                name: 'asig_id',
                                xtype: 'displayfield',
                                anchor: '100%',
                                fieldLabel: gt.dgettext('esiacademia','Id')
                            }, {
                                name: 'asig_guid',
                                xtype: 'displayfield',
                                anchor: '100%',
                                fieldLabel: gt.dgettext('esiacademia','Guid')
                            }, {
                                name: 'asig_fechaalta',
                                xtype: 'displayfield',
                                anchor: '100%',
                                fieldLabel: gt.dgettext('esiacademia','Creada'),
                                renderer: function(value) {
                                    return Ext.util.Format.date(value,'d-m-Y H:i:s')
                                }
                            }, {
                                name: 'asig_usralta_nombre',
                                xtype: 'displayfield',
                                anchor: '100%',
                                fieldLabel: gt.dgettext('esiacademia','Creada por')
                            }, {
                                name: 'asig_fechamod',
                                xtype: 'displayfield',
                                anchor: '100%',
                                fieldLabel: gt.dgettext('esiacademia','Modificada'),
                                renderer: function(value) {
                                    return Ext.util.Format.date(value,'d-m-Y H:i:s')
                                }
                            }, {
                                name: 'asig_usrmod_nombre',
                                xtype: 'displayfield',
                                anchor: '100%',
                                fieldLabel: gt.dgettext('esiacademia','Modif. por')
                            }]
                        }]
                    }]
                }]
            }]
        });

And thats de result: (see atached image)

As you can see also, in my code i put buttons only in row 1, and in the result there are buttons in 3 rows. Probably the problem isn't resizing.

**maneljn** · 21 Sep 2012 8:33 AM

sorry, sorry, sorryyy

i found my mistake.
In this piece of code

Code:

                                tinymceInit: {
                                    theme : "advanced",
                                    skin: "extjs",

the word tinymceInit must be tinyMCEConfig

Code:

                                tinyMCEConfig: {
                                    theme : "advanced",
                                    skin: "extjs",

**SommerEngineering** · 27 Sep 2012 11:56 PM

I have a problem with the validation of the editor

Please read my short code below. I want to invalidate the editor if the content is to short or to long.

Please note: The invalidate state indicator is shown at the right side (msgTarget: 'side'). This should (must) work also with the editor. You are able to see this with the textfield

Code:

new Ext.form.Panel(
{

    bodyPadding: 5,
    url: '/...',
    layout: 'anchor'

    ,

    defaults:
    {
        anchor: '100%'
    }

    ,

    defaultType: 'textfield',

    fieldDefaults:
    {
        labelWidth: 125,
        msgTarget: 'side',
        autoFitErrors: false,
        allowBlank: false
    }

    ,

    items:
    [
        {
        fieldLabel: 'Topic',
        name: 'topic',
        minLength: 16,
        maxLength: 100
        }

        ,

        {
        xtype: 'label',
        html: '<p>Please type below your question.</p>'
        }

        ,

        new Ext.ux.form.TinyMCETextArea(
        {
        id: "EDITOR",
        fieldLabel: '',
        name: 'question',
        noWysiwyg: false,
        margin: "3 20 0 0",
        height: 300,
        minLength: 160,
        maxLength: 50000,
        minLengthText: "The question is too short (< 160 chars)!",
        maxLengthText: "The question is too long (> 50,000 chars)!"

        ,

        //validator: function (value)
        //{
        //    var content = Ext.getCmp('EDITOR').getValue();
        //    var plain = content.replace(/<(?:.|\n)*?>/gm, "");
        //    alert(plain.length > 160);

        //    return (plain.length > 160) ? true : 'The question is too short (< 160 chars)!'
        //}

        //,

        tinyMCEConfig:
        {
            theme: "advanced",
            skin: "extjs",
            inlinepopups_skin: "extjs",
            theme_advanced_row_height: 27,
            delta_height: 1,
            schema: "html5",
            plugins: "autolink,emotions,paste,fullscreen",
            theme_advanced_buttons1: "emotions,charmap,sub,sup,|,bold,italic,underline,strikethrough,|,forecolor,backcolor,|,undo,redo,|,hr,|,fullscreen",
            theme_advanced_buttons2: "image,fontsizeselect,|,link,unlink,|,justifyleft,justifycenter,justifyright,justifyfull,|,bullist,numlist,outdent,indent",
            theme_advanced_buttons3: "",
            theme_advanced_buttons4: "",
            theme_advanced_toolbar_location: "top",
            theme_advanced_toolbar_align: "left",
            theme_advanced_statusbar_location: "none"
        }
        })
    ]
})

Anyone can help me with this problem?

**Qtx** · 28 Sep 2012 2:08 AM

Hi SommerEngineering,

it looks like the the validation process works not really correct in the case of automatic validation upon change

There are 2 problems - an easy problem and a big one.

1. The validation is not fired upon change. It is easy, I tell you how to fix it.
2. I display only the red dotted line if the field is invalid. The warning sign appears behind the editor. I must think about the following things. Where to place the warning sign and how to implement the displaying behavior. The first idea is tu use the status bar of the WYSIWYG for that.

To solve the problem 1, edit the TinyMCETextArea.js

1. Line 461, the method me.tinyMCEConfig.onchange_callback

Old

Code:

      ed.save();
      
      me.fireEvent('change', me, newval, oldval, {});

New

Code:

      ed.save();
      
      me.fireEvent('change', me, newval, oldval, {}); 
      
      if(me.validateOnChange) 
      {
        me.validate();
      }

2. Line 963

Remove the line

Code:

          ed.onChange.add(evHandler);

**SommerEngineering** · 28 Sep 2012 3:47 AM

Thanky, Qtx

I have a workaround for both, thanks to the Firebug AddOn in Firefox

I dont use any longer the automatic form bind of the submit button. Inside the click event of this button, I call Ext.getCmp('MY_FORM').getForm().isValid(); This cause the TinyMCE editor to validate all.
I defined my own init event for that window (I use the editor within a Window). After I create the window, I call once that init event (see first code below). Inside the init event (see second code below) I calculate the correct position for the sign.

Init:

Code:

 win.show();
 win.center();
 win.fireEvent("init");

Place the warning sign:

Code:

init:
{
    fn: function ()
    {
        var currentErrorElementTextfieldX = Ext.getCmp("MyTitleTextfield").errorEl.getX();
        var currentYPositionEditor = Ext.getCmp('MyEditor').getPosition()[1];

        Ext.getCmp('MyEditor').errorEl.setY(currentYPositionEditor);
        Ext.getCmp('MyEditor').errorEl.setX(currentErrorElementTextfieldX);
    }
}

For the moment, this solution is fine for me

Ext.ux.form.TinyMCETextArea - a text area with integrated TinyMCE WYSIWYG Editor.

Thread Tools

Search Thread

Display

Problem with validation

Problem with validation

Tags for this Thread