我试图改变一个EXTJS htmleditor字段中tinymce编辑器的内容样式。该应用程序具有系统设置,您可以在其中选择文本字段或编号字段的字体大小。现在我想为extjs htmleditor字段设置默认字体大小,但这是由tinymce覆盖使用。如何将请求发送到前端,其中保存了系统设置?然后微调覆盖应该会改变他的字体大小设置。
这是tinymce的HTMLEDITOR
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,
使用content\u样式时
TinyMCE通过
编辑:有两种方法可以做到这一点:
...这两项都可以使用JavaScript完成。
选项1:添加
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);
这不会删除最初加载的样式,但会在标题的末尾加载这些样式,因此它们应该覆盖以前加载的任何选项。
选项2:将CSS添加到iframe
的body
中,您可以在通过JavaScript添加iframe后覆盖这些内容。举个例子
tinyMCE.editors[0].contentWindow.document.body.style.fontFamily = "Courier";
下面是一个提琴,显示了初始化TinyMCE后更改CSS方面的两个选项:https://fiddle.tiny.cloud/Wyhaab/3