extjs htmleditor设置文本的颜色和字体样式

Ext.ComponentQuery.query('htmleditor')[0].textareaEl.setStyle({color: "red"});

 Ext.DomHelper.applyStyles(Ext.ComponentQuery.query('htmleditor')[0].getEditorBody(),Ext.ComponentQuery.query('htmleditor')[0].textareaEl.getStyles('color))

设置颜色代码

Ext.ComponentQuery.query('htmleditor')[0].textareaEl.setStyle({'font-family': "Verdana"})

Ext.DomHelper.applyStyles(Ext.ComponentQuery.query('htmleditor')[0].getEditorBody

(),Ext.ComponentQuery.query('htmleditor')[0].textareaEl.getStyles('font-family'))

设置字体样式代码

在extjs中找到以下文件absform.js替换代码如下在tomcat中打开absform.html

Ext.require([

    'Ext.form.*',

    'Ext.layout.container.Absolute',

    'Ext.window.Window'

]);

Ext.onReady(function() {

    function pctChange(val){

        if(val > 0){

            return '' + val + '%';

        }else if(val < 0){

            return '' + val + '%';

        }

        return val;

    }

    var form = Ext.create('Ext.form.Panel', {

        layout: 'absolute',

        url: 'save-form.php',

        defaultType: 'textfield',

        border: false,

        items: [{

            fieldLabel: 'Send To',

            fieldWidth: 60,

            msgTarget: 'side',

            allowBlank: false,

            x: 5,

            y: 5,

            name: 'to',

            anchor: '-5'  // anchor width by percentage

        }, {

            fieldLabel: 'Subject',

            fieldWidth: 60,

            x: 5,

            y: 35,

            name: 'subject',

            anchor: '-5'  // anchor width by percentage

        }, {

            x:5,

            y: 65,

            xtype: 'textarea',

            style: 'color:red',

            hideLabel: true,

            name: 'msg',

            cls:'x-form-field x-form-text',

             value:'dfghj',

            anchor: '-5 -5',// anchor width and height

}]

    });

var a=Ext.create('Ext.Component', {

    renderTo: Ext.getBody(),

    renderTpl: [

        '{title}',

        '

{desc}

    ],

    renderData: {

        title: "Error",

        desc: "Something went wrong"

    },

    renderSelectors: {

        titleEl: 'h1.title',

        descEl: 'p'

    },

    listeners: {

        afterrender: function(cmp){

            // After rendering the component will have a titleEl and descEl properties

            cmp.titleEl.setStyle({color: "red"});

        }

    }

});

    var win = Ext.create('Ext.window.Window', {

        title: 'Resize Me',

        width: 500,

        height: 300,

        minWidth: 300,

        minHeight: 200,

        layout: 'fit',

        plain:true,

        items: form,

        buttons: [{

            text: 'Send'

        },{

            text: 'Cancel'

        }]

    });

    win.show();

    var win1 = Ext.create('Ext.window.Window', {

        title: 'Resize Me',

        width: 500,

        height: 300,

        minWidth: 300,

        minHeight: 200,

        layout: 'fit',

        plain:true,

        items: a,

        buttons: [{

            text: 'Send'

        },{

            text: 'Cancel'

        }]

    });

win1.show();

var c= new Ext.form.Panel({

         title: 'Editorad',

defaultType: 'textfield',

          renderTo: Ext.getBody(),

          width: 550,

          height: 250,

          frame: true,

          layout: 'fit',

   enableLists : false,

enableLinks : false,

enableFontSize:false,

          items: [{

              xtype: 'htmleditor',

name:'wang', 

value:'abdfghj',

style:{color:'#eee',

width:'20%'},

cls:'x-html-editor-wrap textarea',

   listeners: {

        afterrender: function(cmp){

            // After rendering the component will have a titleEl and descEl properties

            cmp.textareaEl.setStyle({color: "red"});

Ext.ComponentQuery.query('htmleditor')[0].focus('true',1);

        }

    },

html:Ext.ComponentQuery.query('form textarea[name=msg]')[0].getValue(),

              enableColors: true,

              enableAlignments: false,

enableLists : false,

enableLinks : false,

enableFontSize:true,

enableSourceEdit:false,

enableFormat:false,

enableColors :true,

enableFont : true,

          },{

            x:5,

            y: 65,

            xtype: 'textarea',

            style: 'color:red',

            hideLabel: true,

            name: 'msg1',

            cls:'x-form-field x-form-text',

             value:'dfghj',

            anchor: '-5 -5',// anchor width and height

}]

      });

    var win2 = Ext.create('Ext.window.Window', {

        title: 'Resize Me',

        width: 500,

        height: 300,

        minWidth: 300,

        minHeight: 200,

        layout: 'fit',

        plain:true,

        items: c,

        buttons: [{

            text: 'Send'

        },{

            text: 'Cancel'

        }]

    });

win2.show();

}); 

google chrome调试效果图