CODEWITHSUNDEEP
javascripthtmltinymce
Sterling Archer
Sterling Archer

Reputation: 22395

Rich Text Content Breaks TinyMCE

So I'm working with some content using TinyMCE, and unfortunately it seems that sometimes, the content put into it (RTE blob data from the database) is breaking the script.

Here is a fiddle of it in action.

I use a function to set the tinymce.init(), and it works fine, however it seems that something in the RTE data completely breaks the textareas.

Here is the script:

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");

And the HTML is simple but:

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

See the content in the fiddle that's breaking it. Is there a way to protect my script from input such as this?

Here is the error as well: 

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

Upvotes: 0

Views: 240

Answers (1)

Patrick Evans
Patrick Evans

Reputation: 42736

This seems to be a bug in TinyMCE.

Reproduction: http://jsfiddle.net/pevans02/6t25w/

A quick fix for this is just make sure there is a space before the comments

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

JSFiddle Fix Demo

Added a comment to the bug about it still being in 4.1

Other Fixes:

Add code to the toolbar list

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

Patch code

Error seems to be from one of the statements filtering out data-mce-bogus elements

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

Since comments do not have a getAttribute function, it errors out. So adding a check for getAttribute fixes it

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

Tinymce 4.1.2 Minified Version Patch

Patch source (requires node.js to build)

Get tinymce source from github, patch Formatter.js, and build

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

Upvotes: 1

Related Questions