Compare tinyMCE content against original content

Question

How can I tell if tinyMCE content was changed? I thought I would do the following, however, tinymce puts each <p> on a separate line. I guess I can just check keypress as done by How to TinyMce change detect?, but that doesn't really tell if anything was ultimately changed.

tinymce.init({selector: "#content"});
if($.trim(tinymce.get('content').getContent()) != $.trim($('#content').val())){alert('changed');}

federico-t · Answer 1 · 2013-10-03T16:44:54.770

0

What I would do (if I got what you are asking right) is store the original value in a variable and on the onchange_callback TinyMCE provides, determine if the current content is equal to the original one or not. So

// Store the original value
var original = document.getElementById('content').value;

function myCustomOnChangeHandler(inst)
{
    // Determine if the current content of the textarea is equal to
    // the original content
    if (original.localeCompare(inst.getBody().innerHTML) === 0) {
        console.log("Hasn't changed.");
    } else {
        console.log("Changed.");
    }
}

// Initialize TinyMCE
tinymce.init({
    selector : '#content',
    onchange_callback : "myCustomOnChangeHandler"
});

And if this doesn't work, try using the isDirty method which returns a boolean that determines if the content has been changed.

edited Oct 03 '13 at 16:44

answered Sep 30 '13 at 20:13

federico-t

12,014
19
67
111

Thanks, but this will only show "Hasn't changed." as `document.getElementById('content').value;` isn't changed when typing, only `tinymce.get('content').getContent()`. – user1032531 Oct 01 '13 at 13:15
`tinymce.get('content').getContent()` _does_ change when typing? Then compare it with the variable that holds the original value (I've updated the code). – federico-t Oct 01 '13 at 17:29
Yes, it changes, but too much. As I indicated in my OP, even if the user doesn't change the HTML, TinyMCE automatically puts a bunch of line spaces in it at each `
` so it appears changed using your solution even though the rendered HTML is not changed.
– user1032531 Oct 03 '13 at 12:17
I've updated my answer, check if any of those solutions work. I'd recommend using the `isDirty` method because it's more precise. – federico-t Oct 03 '13 at 16:44
I am just about to test isDirty. Also, something like `setup : function(ed) {var original=tinymce.get('content').getContent();}` will probably work, and then just compare `original` to `tinymce.get('content').getContent();})` – user1032531 Oct 05 '13 at 14:21

score 0 · Answer 2 · answered Aug 19 '16 at 01:46

Old question but the answer might be useful because TinyMCE is still used nowadays.

The problem is that when you set an HTML content to TinyMCE editor, the original content is actually modified. For example HTML properties might be inverted. It doesn't change anything for the rendering result but a string comparison doesn't work.

So what I did is simply put the original HTML in an invisible TinyMCE editor and then perform the comparison between this one and my "real" editor.

<script type="text/javascript">
    tinymce.init({
       selector: 'textarea#originalContent'
    });
</script>
<textarea id="originalContent" style="display:none;"></textarea

And then you trigger the comparison whenever you need. In this example I chose to perform it every time my real TinyMCE editor's content is modified

<script type="text/javascript">
    tinymce.init({
        theme: 'modern',
        height: 500,
        width: 950,
        selector: 'textarea#tinymcePopup',
        setup: function (ed) {
            ed.on("change", function () {
                contentChanged(ed);
            })
        }
    });

    function contentChanged() {
        var originalContent = tinymce.get('originalContent').getContent();
        var editableContent = tinymce.get('tinymcePopup').getContent();
        if (originalContent != editableContent) {
            console.log('changed');
        }
        else {
            console.log('not changed');
        }
    }
</script>
 <textarea id="tinymcePopup"></textarea>

Compare tinyMCE content against original content

2 Answers2