Heim >Web-Frontend >HTML-Tutorial >TinyMCE 粘贴HTML代码,避免style属性被自动清除_html/css_WEB-ITnose
TinyMCE在粘贴含有style属性的HTML代码时,会自动清除style属性,设置 extended_valid_elements 也只能在Firefox浏览器起作用,Chrome无效。
extended_valid_elements: 'div[style|class|id]'
Chrome下即使设置了 inline_styles: true, schema: 'html5', 也没有用
无奈去看TinyMCE源码,发现如果去掉 plugins 里的 paste 就不会被剔除样式,最终在 plugin/paste/plugin.js 里找到这样一段代码:
function addPreProcessFilter(filterFunc) { editor.on('BeforePastePreProcess', function(e) { e.content = filterFunc(e.content); }); }
估计是在这里过滤的,找到 filterFunc这个函数:
// Sniff browsers and apply fixes since we can't feature detect if (Env.webkit) { addPreProcessFilter(removeWebKitStyles); } if (Env.ie) { addPreProcessFilter(removeExplorerBrElementsAfterBlocks); }
看到这里我震惊了,TinyMCE真的这么狗屎吗?就直接检测了webkit和ie,Firefox被无视了吗?Firefox下的style被保留是因为TinyMCE的开发人员根本没有考虑Firefox浏览器,我还以为是Chrome下出了什么bug,真够狗屎的。
在进去这个 removeWebKitStyles函数里:
// 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; }
很明显,只要设置一下这个属性就可以
paste_webkit_styles: true
看了TinyMCE的源代码,写的真叫一个烂,全局变量没有加任何标识区分本地变量,函数和语句混合在一起。