如何放弃使用 TinyMCE 所做的所有更改？

Question

这似乎很容易和常见，但我似乎无法让它工作。

我有一个按钮（编辑），它可以打开 TinyMCE 以进入编辑模式。发生这种情况时，编辑按钮变为（取消），如果按下 TinyMCE 将关闭并且所有更改应该丢失。文本应该恢复到原来的状态，就好像什么都没发生一样。当我按下取消时，我仍然得到了所有的编辑。我确信我可以重新查询原始数据，但必须为如此常见的东西内置一些东西。

这是我的相关 HTML：

<div class="row">
<div class="col gu10">
    <div class="topic-summary">
        <div class="date" title="@Model.CreatedDate">
            <p>
                <span class="month">@Model.CreatedMonth</span>
                <span class="day">@Model.CreatedDay</span>
                <span class="year">@Model.CreatedYear</span>
            </p>
        </div>
        <div class="topic">
            <h1 id="title">@Model.Title</h1>
            <div id="body">@Model.Body</div>
        </div>
        <ul class="tags">
            @foreach (var tag in Model.Tags)
            {
                @Html.Action("_TagSummary", "Tag", new { tagId = tag })
            }
        </ul>
        <ul class="menu">
            <li class="item"><span class="edit">Edit</span></li>
            <li class="item"><span class="delete">Delete</span></li>
        </ul>
    </div>
</div>
</div>

这是我的相关 jQuery：

function edit() {
//Make the title and header to look editable
$('#title').css({
    border: "1px dotted #333"
});
$('#body').css({
    border: "1px dotted #333"
});

//Detatch the 'edit' handler
$('.edit').unbind();
//Change it to a 'save' event
$('.edit').html('Save').click(save);

//Detatch the 'delete' handler
$('.delete').unbind();
//Change it to a 'cancel' event
$('.delete').html('Cancel').click(cancel);

//Go into edit mode
//Prevent adding the editor over and over
if (!tinymce.activeEditor) {
    tinymce.init({
        selector: "#title",
        theme: "modern",
        language: "en",
        inline: true,
        toolbar: "undo redo",
        menubar: false,
        browser_spellcheck: true
    });

    tinymce.init({
        selector: "#body",
        theme: "modern",
        language: "en",
        inline: true,
        menubar: false,
        browser_spellcheck: true,
        plugins: [
                                "link"
        ],
        toolbar: "undo redo | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link"
    });
}
}

function cancel() {
//Make the title and header to look non-editable
$('#title').css({
    border: "none"
});
$('#body').css({
    border: "none"
});

//Detatch the 'edit' handler
$('.edit').unbind();
//Change it to a 'edit' event
$('.edit').html('Edit').click(edit);

//Detatch the 'delete' handler
$('.delete').unbind();
//Change it to a 'delete' event
$('.delete').html('Delete').click(del);

//Disable edit mode
//Only remove the current editor if it's active
if (tinymce.activeEditor) {
    //tinymce.triggerSave();
    tinymce.execCommand('mceRemoveEditor', true, tinymce.activeEditor.id);
}
}

我创建了 2 个内联 MCE 编辑器，一个用于标题，一个用于正文。编辑按钮具有启动 MCE 编辑的绑定，并且一旦选择具有新的绑定以将其关闭。我无法对“撤消”进行编辑，也找不到任何有帮助的文档。顺便说一句，我正在使用 TinyMCE 4.0.12。谢谢。

Answer 1

我在用这个，TinyMCE保存前已经有信息了

{
`tinymce.bodyElement.innerHTML = tinymce.startContent`
}

Answer 2

这里是 v.4 的清晰可行的解决方案：

tinyMCE.activeEditor.bodyElement.innerHTML = tinyMCE.activeEditor.startContent;

tinyMCE 是全局变量。

Answer 3

我仍然有兴趣看到一种更自动的方法，但在阅读了几天的 TinyMCE 文档后，我没有看到一种简单的方法。以下是我如何使用 jQuery 解决我自己的问题。这些是对上述方法的补充：

function edit() {
    //Save the current state of the content
    initialBody = $('#body').html();
    initialTitle = $('#title').html();

    // Rest of the method above goes here
}

这会保存用户按下编辑时数据的状态。现在，如果用户按下取消，我会执行以下操作：

function cancel() {

    // Rest of the method above goes here

    //Disable edit mode
    //Only remove the current editor if it's active
    if (tinymce.activeEditor) {
        tinymce.execCommand('mceRemoveEditor', true, 'title');
        tinymce.execCommand('mceRemoveEditor', true, 'body');
    }

    //Reset the content
    $('#title').html(initialTitle);
    $('#body').html(initialBody);
}

我希望这可以帮助某人。如果有更好的方法，请告诉我。