javascript - 富文本内容破坏 TinyMCE

Question

因此，我正在使用 TinyMCE 处理一些内容，不幸的是，有时放入其中的内容(来自数据库的 RTE blob 数据)会破坏脚本。

Here is a fiddle它在行动中。

我使用一个函数来设置tinymce.init()，它工作正常，但似乎 RTE 数据中的某些内容完全破坏了文本区域。

这是脚本:

function initMCE(e) {
    tinymce.init({
        mode:"exact",
        elements:e,
        plugins:"paste",
        height:300,
        width:750,
        toolbar: "bold italic underline, bullist, numlist superscript subscript",
        menubar:false,
        valid_elements : "em/i,li,ul,ol,u,strong/b,sup,sub,p"
    });
}
initMCE("definition");
initMCE("consent");
initMCE("penalty");

HTML 很简单，但是:

<textarea name="definition" id="definition"></textarea>
<textarea name="consent" id="consent"></textarea>
<textarea name="penalty" id="penalty"></textarea>

查看 fiddle 中破坏它的内容。有没有办法保护我的脚本免受此类输入的影响？

这也是错误:

Uncaught TypeError: undefined is not a function tinymce.cachefly.net/4.1/tinymce.min.js:6

Answer 1

这似乎是 bug in TinyMCE .

复制:http://jsfiddle.net/pevans02/6t25w/

解决此问题的一个快速方法是确保评论前有一个空格

<textarea name="definition" id="definition"> <!-- some comment --></textarea>
<textarea name="consent" id="consent"></textarea>
<textarea name="penalty" id="penalty"></textarea>

JSFiddle Fix Demo

添加了关于该错误仍然存​​在于 4.1 中的评论

其他修复:

将代码添加到工具栏列表

toolbar: "code bold italic underline, bullist, numlist superscript subscript"

补丁代码

错误似乎来自过滤 data-mce-bogus 元素的语句之一

//From Formatter.js source
parents = Tools.grep(parents, function(node) {
    return !node.getAttribute('data-mce-bogus');
});

由于注释没有 getAttribute 函数，因此会出错。因此添加对 getAttribute 的检查可以修复它

return (node.getAttribute && !node.getAttribute('data-mce-bogus'));

Tinymce 4.1.2 Minified Version Patch

补丁源(需要node.js来构建)

从github获取tinymce源代码，patch Formatter.js ，并构建

git clone git://github.com/tinymce/tinymce.git ./tinymce
git checkout -b patched 416e35737aed2af60eff69887bb7bf33cc3b4bc8
wget -O Formatter.js.patch https://www.dropbox.com/s/mt5ar8k8iru8x6o/Formatter.js.patch?dl=1
patch -p1 < Formatter.js.patch
npm i -g jake
npm i
jake

https://github.com/tinymce/tinymce