在 TinyMCE 4 中预览之前更改内容

Question

在TinyMCE 4中，我想在预览弹出窗口上显示之前更改显示的内容。此更改不得影响编辑器中的当前内容。我们可以这样做吗？

如果不能，我想捕获预览窗口的关闭事件。怎么做？

Answer 1

TinyMCE允许我们通过属性init_instance_callback注册回调

通过使用BeforeExecCommand 事件（奇怪的是当前文档中没有），您可以在执行命令之前进行更改。我们可以类似地使用ExecCommand 事件在命令执行后进行更改。预览插件触发该mcePreview命令。您可以在此处查看编辑器命令标识符。

将它们放在一起，您可以在初始化 TinyMCE 时添加以下内容。这将在预览中显示“更改的内容”，而不会对 TinyMCE 中的内容进行可见的更改。

var preProssesInnerHtml; 
tinymce.init({
    //other things...
    init_instance_callback: function (editor) {
        editor.on('BeforeExecCommand', function (e) {
            if (e.command == "mcePreview") {
                //store content prior to changing.
                preProssesInnerHtml = editor.getContent();
                editor.setContent("changed content");
            }
        });
        editor.on("ExecCommand", function (e) {
            if (e.command == "mcePreview") {
                //Restore initial content.
                editor.setContent(preProssesInnerHtml);
            }
        });
    }
}