Extjs如何动态更改htmleditor的背景颜色

qxgroojn  于 2022-11-04  发布在  其他
关注(0)|答案(3)|浏览(165)

'我在htmleditor中添加了一个自定义按钮,它可以改变预览区域的背景颜色。我尝试了所有方法,但似乎都不能得到它

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) {

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

`

c86crjj0

c86crjj01#

我发现了另一个解决方案,你可以使用HTMLeditor类中的getEditorBody()方法来获取预览区域,然后动态地设置它的样式。
在ExtJS 6中:

{
    xtype: 'htmleditor',
    listeners: {
        initialize: 'onEditorInitialize'
    }
}

onEditorInitialize: function (editor) {
    const bodyArea = editor.getEditorBody();
    bodyArea.style.backgroundColor = '#333';
}
fafcakar

fafcakar2#

我希望我可以使用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类来捣乱,但没有产生任何东西。

2ledvvac

2ledvvac3#

这不是原来问题的答案。但是我在谷歌上搜索如何在ExtJS中设置html编辑器的背景颜色时发现了这个线程(只是静态的)。
对于那些带着同样的问题来到这里的人来说,下面的风格对我很有帮助:

.x-html-editor-wrap textarea {
    background: #eee
}

相关问题