EXTJS如何改变HTML编辑的背景色动态

Question

`我已经添加在HTML编辑自定义按钮，这将改变预览area.I的背景颜色已经尝试了一切，但似乎无法得到它

Ext.onReady(function() { 
    Ext.tip.QuickTipManager.init(); // enable tooltips 
new Ext.panel.Panel({ 
    title: 'HTML Editor', 
    renderTo: Ext.getBody(), 
    width: 550, 
    height: 250, 
    frame: true, 
    layout: 'fit', 
    items: { 
     xtype: 'htmleditor', 
     enableColors: false, 
     enableAlignments: false, 
     listeners:{ 
       render:function(){ 
         this.getToolbar().add({ 
           xtype:'button', 
           scope: this, 
           tooltip:'Set background color',        
           iconCls : 'btn-charttheme', 
           menu : { 
            xtype : 'colormenu', 
            listeners : { 
             select :function(picker,selColor) { 

              } 
             } 
            } 
           }); 
         } 
        } 
       } 
});` 

`

Answer 1

我希望我可以使用this solution，但它看起来像只在Ext JS 3中工作，除非我做错了什么。我开始与编辑textareaEl探讨，并提出了一个非常丑陋的解决方案...主要是因为他们在引擎盖下使用iframe。这里是我的代码：

Ext.onReady(function() { 
    Ext.application({ 
    name: 'Fiddle', 
    launch: function() { 
     Ext.tip.QuickTipManager.init(); // enable tooltips 
     var myEditor = Ext.create('Ext.form.field.HtmlEditor', { 
     enableColors: false, 
     enableAlignments: false, 
     listeners: { 
      render: onRenderEditor 
     } 
     }); 
     function onRenderEditor(editor) { 
     this.getToolbar().add({ 
      xtype: 'button', 
      scope: this, 
      tooltip: 'Set background color', 
      iconCls: 'btn-charttheme', 
      menu: { 
      xtype: 'colormenu', 
      listeners: { 
       select: function (picker, selColor) { 
       if (editor.iframeEl) { 
       /* This is very hacky... we're getting the textareaEl, which 
       * was provided to us, and getting its next sibling, which is 
       * the iframe... and then we're probing the iframe for the 
       * body and changing its background-color to the selected hex */ 
        var iframe = editor.iframeEl.dom; 
        if (iframe) { 
        var doc = (iframe.contentDocument) ? iframe.contentDocument : iframe.contentWindow.document; 
        if (doc && doc.body && doc.body.style) { 
         doc.body.style['background-color'] = '#' + selColor; 
         /*txtTextarea = Ext.fly(rb).down('textarea'); 
         txtTextarea.dom.style.color = 'yellow'; 
         txtTextarea.dom.style.cssText += 'background: olive !important';*/ 
        } 
        } 
       } 
       } 
      } 
      } 
     }); 
     } 
     new Ext.panel.Panel({ 
     title: 'HTML Editor', 
     renderTo: Ext.getBody(), 
     width: 550, 
     height: 250, 
     frame: true, 
     layout: 'fit', 
     items: [myEditor] 
     }); 
    } 
    }); 
}); 

就像我说的，我不喜欢这样的解决方案，但它是一个解决方案...我很乐意听到的正确方法。我试着用CSS类瞎搞，但没有产生任何东西。