微型MCE按键

Question

我正在尝试制作一个在.keyPress()上工作的预览框，就像当你向Stack Overflow提交一个问题时，有什么不同。我希望使用微型的mce编辑器，让它识别回车键，这样它将保持与用户输入的格式相同，我已经在这里看过了。

Tinymce on keypress I am try to display the preview of the content

但老实说，我对此还是个新手，并不真正了解如何正确地实现它。我有一个很小的mce编辑器可以很好的工作，但是现在

我想要做的是创建一个div，它从小mce编辑器中获取内容，并在另一个div中预览它。

Answer 1

你所链接的问题很好地概括了这一点。首先，您要做的是向页面添加一个预览<div>，如下所示：

<div id="tiny-mce-preview"></div>

(您将这个问题标记为jQuery，因此我将假定您使用的是TinyMCE jQuery包。)在TinyMCE初始化中，向onKeyPress事件添加一个函数，用于将TinyMCE内容复制到预览<div>。因此，完整的初始化可能如下所示：

var theEditor = $('textarea').tinymce({
    script_url: 'path/to/your/tinymce/tiny_mce.js',
    height: "400",
    width: "600",

    //
    // ... whatever other options you may have ...
    //

    // Capture the onKeyPress event and do something with TinyMCE's content
    setup: function (theEditor) {
        // "theEditor" refers to the current TinyMCE instance
        theEditor.onKeyPress.add(function () {
            // Get the current editor's content
            var content = theEditor.getContent();
            // Find our "preview" div
            // Set it's content to be the same as the editor's
            document.getElementById("tiny-mce-preview").innerHTML = content;
        })
    }
});

每当在TinyMCE实例中按下某个键时，预览div的内容都将设置为TinyMCE实例的内容。