TinyMCE粘贴HTML代码，避免style属性被自动清除_html/css

来源：动视网责编：小采时间：2020-11-27 16:06:05

TinyMCE粘贴HTML代码，避免style属性被自动清除_html/css

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

推荐度：

点击下载本文 文档为doc格式

导读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

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的源代码，写的真叫一个烂，全局变量没有加任何标识区分本地变量，函数和语句混合在一起。

TinyMCE粘贴HTML代码，避免style属性被自动清除_html/css

推荐度：

点击下载本文 文档为doc格式

标签：自动清除代码

热门焦点

TinyMCE粘贴HTML代码，避免style属性被自动清除_html/css

TinyMCE粘贴HTML代码，避免style属性被自动清除_html/css

TinyMCE粘贴HTML代码，避免style属性被自动清除_html/css

最新推荐

猜你喜欢

热门推荐