启用插件后更改TinyMCE HTML

时间:2014-11-10 00:29:38

标签: javascript jquery html tinymce

我可以点击“恢复”来更改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>

1 个答案:

答案 0 :(得分:1)

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

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

变为

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