TinyMCE editor v6 - add additional settings

PHPMaker General Discussion (PHPMaker)
1

Hi,

have a filed that holds html/css content to be used as a template. but tinymce is stripping out the css when you go to edit the record. the initial code is "tinymce" compliant and saves the full template data correctly... on view the field is holding the correct css and other attributes. but if you "edit" tiny wakes up and decides to remove the css.

i hacked the eweditor.js directly, added the values as suggested, and it appears to work and the design stays in tack:

this is for admin only use that creates these templates. the templates are also scanned when rendered and any <script><?php> tags are stripped so the template fails in the event someone tries to add any script code.

  selector: 'textarea',
  valid_elements: '*[*]', // Allow all elements with all attributes
  extended_valid_elements: 'style[type|media],div[class|style|id]',
  valid_classes: {
    '*': 'tmce-*' // Allow all classes starting with tmce-
  },
  valid_styles: {
    '*': 'color,background-color,background-image,background-gradient,font-family,font-size,font-weight,padding,margin,border,display,flex,justify-content,align-items,text-align,position,top,left,right,bottom,width,height,max-width,min-width,max-height,min-height,box-shadow,border-radius,overflow,line-height,letter-spacing,text-transform,opacity,z-index,transform,transition,flex-wrap,gap,flex-direction,flex-wrap,grid-template-columns,grid-gap,backdrop-filter'
  },
  allow_conditional_comments: true,
  protect: [
    /<style[\s\S]*?<\/style>/g, // Protect style tags
    /<link[\s\S]*?>/g // Protect link tags
  ]

is tinymce.init() valid?, can I add this code to the edit form to add the additional settings?

thanks,

2

You may search "create.editor" in the forum.

3

thanks... that would have been a good starting point.

so, added the function, and few parameters to see if create.editor is firing, it is.. but the options i added seem to have absolutely no effect, the editor continues to rip out the css.
I have templates that are tinymce friendly and retain the format when editting, but this may not always be the case.

here's the code snippet

    $(document).on("create.editor", function(e, args) {
            args.settings.menubar =  'file edit insert view format table tools'; // test
            args.settings.removed_menuitems = 'help, print, newdocument';  // test

        args.settings.valid_elements = '*[*]'; 
        args.settings.valid_styles = '*' ;
        args.settings.extended_valid_elements = '*[*]';
        args.settings.keep_styles = true;
        args.settings.fix_list_elements = true;
        args.settings.verify_html  = false;
        args.settings.cleanup = false;
        args.settings.convert_urls = false;
    });

I've checked the tinymce documents and the options listed above do appear to be valid. these settings as recommended by deepseek.

according to this, it should work??: -- which my goal is to prevent it from stripping styles...

if your goal is to prevent TinyMCE from stripping certain CSS properties or inline styles from the edited content upon saving (which can happen with elements like <style> tags or specific attributes), you may need to adjust the content filtering options. The valid_elements and extended_valid_elements options control which HTML elements and attributes (including style attributes) are allowed to remain in the output.

not sure what's going on, any insight appreciated

4

You may also need to enable the RemoveXSS extension and set the field as Raw (so the field value will not be sanitized before saving),