Extjs如何动态改变htmleditor的背景颜色
Extjs how to change background color of htmleditor dynamically
`我在 htmleditor 中添加了一个自定义按钮,它将更改预览的背景颜色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) {
}
}
}
});
}
}
}
});`
`
我希望我可以使用 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 类, 但在那里没有产生任何东西。
我为后代找到了另一个解决方案。您可以使用 HTMLeditor class 上可用的 getEditorBody() 方法来获取预览区域,然后动态设置样式。
在 ExtJS 6 中:
{
xtype: 'htmleditor',
listeners: {
initialize: 'onEditorInitialize'
}
}
onEditorInitialize: function (editor) {
const bodyArea = editor.getEditorBody();
bodyArea.style.backgroundColor = '#333';
}
这不是原问题的答案。但是当我用谷歌搜索如何在 ExtJS 中为 html 编辑器设置背景颜色时,我发现了这个线程(只是静态的)。
对于那些带着同样问题来到这里的人,以下样式对我有用:
.x-html-editor-wrap textarea {
background: #eee
}
`我在 htmleditor 中添加了一个自定义按钮,它将更改预览的背景颜色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) {
}
}
}
});
}
}
}
});`
`
我希望我可以使用 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 类, 但在那里没有产生任何东西。
我为后代找到了另一个解决方案。您可以使用 HTMLeditor class 上可用的 getEditorBody() 方法来获取预览区域,然后动态设置样式。
在 ExtJS 6 中:
{
xtype: 'htmleditor',
listeners: {
initialize: 'onEditorInitialize'
}
}
onEditorInitialize: function (editor) {
const bodyArea = editor.getEditorBody();
bodyArea.style.backgroundColor = '#333';
}
这不是原问题的答案。但是当我用谷歌搜索如何在 ExtJS 中为 html 编辑器设置背景颜色时,我发现了这个线程(只是静态的)。
对于那些带着同样问题来到这里的人,以下样式对我有用:
.x-html-editor-wrap textarea {
background: #eee
}