Change TinyMCE content_style dynamically

Question

I am trying to change the content style of tinymce editor in an EXTJS htmleditor field. The application has systemsettings where you can select font size for an textfield oder numberfield. Now i want to have a defaultsystemsetting font size for the extjs htmleditor field, but this is used by tinymce overlay. How can i send a request to the frontend, where the systemsetting is saved? And then the tinymce overlay should change his font size settings.

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

When you use content_style TinyMCE passes those values to the iframe via a <style> tag in the head of the HTML document. If you use your browser's dev tools you can see that <style> tag located after those of the TinyMCE skin in use.

EDIT: There are really 2 ways you can do this:

• Add a <script> tag to the head (akin to what TinyMCE does with your content_style)
• Add CSS to the body of the iframe

...both of these can be done using JavaScript.

Option 1: Add a <script> tag to the head You can create a new <script> tag using JavaScript and append that to the head of the iframe just as TinyMCE does when it injects your content_style at editor initialization. For example:

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

This does not remove the styles you initially loaded but it loads these at the end of the head so they should override any previously loaded options.

Option 2: Add CSS to the body of the iframe You can override these after the iframe is added via JavaScript. For example

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

Here is a fiddle that shows both options for changing aspects of the CSS after TinyMCE is initialized: https://fiddle.tiny.cloud/Wyhaab/3