Question

我正在尝试制作一个可以在.keyPress()上运行的预览框，就像向Stack Overflow提交问题一样，不同之处在于我希望使用微小的mce编辑器让它识别输入键，以便它保持与用户输入的格式相同，我在这里看了

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

但说实话，我对此很陌生，并不了解如何正确实施它。我有Tiny 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实例的内容。

微小的MCE按键

1 个答案: