TinyMCE pastes HTML code to prevent the style attribute from being automatically cleared_html/css_WEB-ITnose

TinyMCE will automatically clear the style attribute when pasting HTML code containing the style attribute. Setting extended_valid_elements will only work in the Firefox browser, not Chrome.

extended_valid_elements: 'div[style|class|id]'

Even if inline_styles: true, schema: 'html5' is set in Chrome, it is useless

I have no choice but to go Looking at the TinyMCE source code, I found that if I remove the paste in plugins, the style will not be removed. Finally, I found this piece of code in plugin/paste/plugin.js:

function addPreProcessFilter(filterFunc) {            editor.on('BeforePastePreProcess', function(e) {                e.content = filterFunc(e.content);            });        }

It is estimated that it is filtered here. I found it. The filterFunc function:

// Sniff browsers and apply fixes since we can't feature detect        if (Env.webkit) {            addPreProcessFilter(removeWebKitStyles);        }        if (Env.ie) {            addPreProcessFilter(removeExplorerBrElementsAfterBlocks);        }

I was shocked when I saw this. Is TinyMCE really such a piece of shit? Just detect webkit and ie directly, is Firefox ignored? The style under Firefox was retained because the developers of TinyMCE didn't consider the Firefox browser at all. I thought it was some kind of bug under Chrome. It was really bullshit.

In the removeWebKitStyles function:

// Filter away styles that isn't matching the target node            var webKitStyles = editor.settings.paste_webkit_styles;            if (editor.settings.paste_remove_styles_if_webkit === false || webKitStyles == "all") {                return content;            }

Obviously, just set this attribute

paste_webkit_styles: true

After looking at the source code of TinyMCE, I found that it is really poorly written. Global variables are not marked with any labels to distinguish local variables, and functions and statements are mixed together.