Question

如何判断tinyMCE内容是否已更改？我想我会做以下事情，然而，tinymce将每个<p>放在一个单独的行上。我想我可以通过How to TinyMce change detect?来检查按键，但这并不能说明最终是否有任何改变。

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

Answer 1

我会做什么（如果我得到了你正在问的权利）是将原始值存储在一个变量中，并在onchange_callback TinyMCE提供的，确定当前内容是否等于原始内容。所以

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

如果这不起作用，请尝试使用isDirty方法，该方法返回一个确定内容是否已更改的布尔值。

Answer 2

老问题，但答案可能有用，因为现在仍在使用TinyMCE。

问题是，当您将HTML内容设置为TinyMCE编辑器时，实际上会修改原始内容。例如，HTML属性可能会被反转。它不会改变渲染结果的任何内容，但字符串比较不起作用。

所以我所做的只是将原始HTML放在一个看不见的TinyMCE编辑器中，然后在这个和我的“真实”编辑器之间进行比较。

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

然后在需要时触发比较。在这个例子中，我选择在每次修改真正的TinyMCE编辑器内容时执行它

<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>

将tinyMCE内容与原始内容进行比较

2 个答案: