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