动态更改 TinyMCE content_style

Question

我正在尝试在 EXTJS htmleditor 字段中更改 tinymce 编辑器的内容样式。该应用程序具有系统设置，您可以在其中选择文本字段或数字字段的字体大小。 现在我想为 extjs htmleditor 字段设置一个默认系统设置字体大小，但这是由 tinymce 覆盖使用的。 我如何向保存系统设置的前端发送请求？然后tinymce覆盖应该改变他的字体大小设置。

This is the HTMLEDITOR with tinymce

Ext.define('GETS.form.field.tinymce.TinyMceField', {
extend : 'Ext.form.field.TextArea',
alias : [ 'widget.tinymce', 'widget.tinymcefield' ],
editor : null,
readOnly : false,
_isRemoving : false,
editorConfig : {
    skin : 'small',
    icons : 'thin',
    plugins : [ 'advcode advlist anchor autolink charmap codesample directionality emoticons fullpage fullscreen help hr image imagetools insertdatetime link lists mentions nonbreaking noneditable pagebreak powerpaste preview print save searchreplace tabfocus table template textpattern toc visualblocks visualchars wordcount noneditable attributes calculation images translations msword' ],
    toolbar1 : 'code fullscreen preview visualblocks removeformat | undo redo | bold italic underline strikethrough subscript superscript | alignleft aligncenter alignright alignjustify | formatselect fontselect fontsizeselect | bullist numlist | outdent indent | link unlink  insertdatetime | forecolor backcolor | table searchreplace pagebreak nonbreaking | hr charmap emoticons | insertAttribute editAttribute insertEditCalculation insertImage image translateText | insertPageNumber insertPageXOfY | print fullpage | help',
    font_formats : 'Andale Mono=andale mono,times; Arial=arial,helvetica,sans-serif; Arial Black=arial black,avant garde; Book Antiqua=book antiqua,palatino; Calibri=calibri; Comic Sans MS=comic sans ms,sans-serif; Courier New=courier new,courier; Georgia=georgia,palatino; Helvetica=helvetica; Impact=impact,chicago; Symbol=symbol; Tahoma=tahoma,arial,helvetica,sans-serif; Terminal=terminal,monaco; Times New Roman=times new roman,times; Trebuchet MS=trebuchet ms,geneva; Verdana=verdana,geneva; Webdings=webdings; Wingdings=wingdings,zapf dingbats',
    fontsize_formats : '8pt 9pt 10pt 11pt 12pt 13pt 14pt 15pt 16pt 17pt 18pt 19pt 20pt 22pt 24pt 26pt 28pt 36pt 48pt 72pt',
    **content_style : '.mce-content-body {font-size:12pt;font-family:Arial,sans-serif;} p,ul,li** {margin:0}',
    browser_spellcheck : true,
    relative_urls : false,
    remove_script_host : false,
    convert_urls : false,
    resize : false,

Answer 1

当您使用content_style时，TinyMCE 通过 HTML 文档头部的 <style> 标记将这些值传递给 iframe。如果您使用浏览器的开发工具，您会看到 <style> 标签位于所使用的 TinyMCE 皮肤的标签之后。

编辑：实际上有两种方法可以做到这一点：

• 在head 中添加<script> 标签（类似于TinyMCE 对content_style 所做的操作）
• 将 CSS 添加到 body 的 iframe

...这两个都可以使用 JavaScript 完成。

选项 1：将 <script> 标签添加到 head 您可以使用 JavaScript 创建一个新的 <script> 标记并将其附加到 iframe 的头部，就像 TinyMCE 在编辑器初始化时注入您的 content_style 时所做的那样。例如：

var styles = 'p { color: green }'; 
styles += ' body { text-align: center }'; 
          
/* Create style document */ 
var css = document.createElement('style'); 
css.type = 'text/css'; 

if (css.styleSheet)  
    css.styleSheet.cssText = styles; 
else  
    css.appendChild(document.createTextNode(styles)); 

/* Append style to the tag name */ 
tinyMCE.editors[0].contentWindow.document.head.appendChild(css); 

这不会删除您最初加载的样式，但会在 head 的末尾加载这些样式，因此它们应该覆盖任何以前加载的选项。

选项 2：将 CSS 添加到 body 的 iframe 在通过 JavaScript 添加 iframe 后，您可以覆盖这些。例如

tinyMCE.editors[0].contentWindow.document.body.style.fontFamily = "Courier";

这是一个小提琴，它显示了在 TinyMCE 初始化后更改 CSS 方面的两个选项：https://fiddle.tiny.cloud/Wyhaab/3