TinyMCE 粘贴HTML代码,避免style属性被自动清除

原创
2015/05/26 16:47
阅读数 4.6K

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

展开阅读全文
加载中
点击加入讨论🔥(2) 发布并加入讨论🔥
打赏
2 评论
0 收藏
0
分享
返回顶部
顶部