CODEWITHSUNDEEP
extjsextjs4
AngryLeo
AngryLeo

Reputation: 400

Extjs how to change background color of htmleditor dynamically

`I have added a custom button in htmleditor which will change the background color of the preview area.I have tried everything but can't seem to get it

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

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

`

Upvotes: 0

Views: 2151

Answers (3)

Maxím G.
Maxím G.

Reputation: 1026

It's not the answer on the original question. But I found this thread when I googled how to set background color for html editor in ExtJS (just static one).

For those who got here with the same question, the following styles did the trick for me:

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

Upvotes: 0

Lee Mordell
Lee Mordell

Reputation: 641

I found another solution to this for posterity. You can use the getEditorBody() method available on the HTMLeditor class to get the preview area, then dynamically style it.

In ExtJS 6:

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

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

Upvotes: 2

incutonez
incutonez

Reputation: 3331

I was hoping I could use this solution, but it looks like that only worked in Ext JS 3, unless I was doing something wrong. I started poking around with the editor's textareaEl and came up with a very ugly solution... mainly because they're using an iframe under the hood. Here's my code:

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]
      });
    }
  });
});

Like I said, I don't like this solution, but it's a solution... I'd love to hear the proper way... I tried messing around with CSS classes, but didn't produce anything there.

Upvotes: 1

Related Questions