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

这是第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);
}

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

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

3 个答案: