javascript - 启用插件后更改 TinyMCE HTML

Question

我可以通过单击“恢复”来更改 TinyMCE 中显示的 HTML。我现在希望通过单击“取消”将 HTML 返回到原始 HTML。对于我的一生，我无法弄清楚为什么我的方法不起作用(它显示新修改的 HTML)。这是如何实现的。请参阅http://jsfiddle.net/3pn3x4zj/下面复制了。谢谢。

JavaScript

tinymce.init({
    selector: '#tinymce',
    setup: function (ed) {
        ed.on('init', function (e) {
            e.target.hide();
        });
    }
});

$(function () {

    $('#cancel').hide();

    $('#restore').click(function () {
        console.log('Save old HTML and put new HTML from GET request in DIV');
        $('#cancel').show();
        $('#restore').hide();
        $(this).parent().data('oldHTML', $('#tinymce').html());
        var newHTMLgottenFromGetRequest = '<p>Bar Bar Bar</p>'
        $('#tinymce').html(newHTMLgottenFromGetRequest);
        tinymce.get('tinymce').show();
    });

    $('#cancel').click(function () {
        console.log('Put back original HTML');
        $('#cancel').hide();
        $('#restore').show();
        $('#tinymce').html($(this).parent().data('oldHTML'));
        tinymce.get('tinymce').hide();
    });

});

HTML

<div id="tinymce">
    <p>Foo Foo Foo</p>
</div>
<button id="restore">restore</button>
<button id="cancel">cancel</button>

Answer 1

尝试在 #cancel 点击事件中反转这些行:

$('#tinymce').html($(this).parent().data('oldHTML'));
tinymce.get('tinymce').hide();

变成了

tinymce.get('tinymce').hide();
$('#tinymce').html($(this).parent().data('oldHTML'));