How do I discard all changes made with TinyMCE?

Question

This seems like it would be pretty easy and common but I can't seem to get it to work.

I have a button (Edit) which turns TinyMCE on for edit mode. When this happens the edit button becomes (Cancel) and if pressed TinyMCE shuts down and all changes should be lost. The text should revert back to it's original state as if nothing happened. When I press Cancel I've still got all of my edits. I'm sure I can requery the original data, but there's got to be something built in for something so common.

Here's my relevant 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>

Here's my relevant 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);
}
}

I create 2 inline MCE editors, one for title and one for body. The edit button has binding to start up the MCE editing and once selected has new binding to shut it off. I can't get the edits to "undo" and I can't find any documentation that helps. I'm using TinyMCE 4.0.12 by the way. Thanks.

Answer 1

I'd still be interested in seeing a more automatic way of doing this, but after reading through the TinyMCE documentation for days I don't see an easy way of doing this. Here's how I solved my own issue using jQuery. These are additions to the methods above:

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

    // Rest of the method above goes here
}

This saves the state of the data at the time the user pressed Edit. Now if the user presses Cancel I do the following:

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

I hope this helps someone out. Let me know if there's a better way.

Answer 2

I am using this, TinyMCE already have information before save

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

Answer 3

Here is clear and working solution for v.4:

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

Where tinyMCE is global variable.