Heim >Web-Frontend >HTML-Tutorial >TinyMCE 粘贴HTML代码,避免style属性被自动清除_html/css_WEB-ITnose

TinyMCE 粘贴HTML代码,避免style属性被自动清除_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:43:452712Durchsuche

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

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn