使用 TinyMCE 进行真正的实时预览（TinyMCE 的值）

Question

我正在使用一个简短的 Jquery 脚本来实时预览一些输入字段。现在使用 TinyMCE，我无法获取tinyMCE 的值以将其插入 div 中。我发现了另一个线程Get value of tinymce textarea with jquery selector，但我真的不知道如何在我的代码中使用这个tipps。我是 jQuery 的初学者，非常感谢每一个帮助。

JS小提琴

$(document).ready(function() {
    updatePreview();
    $('#live-preview-form input, #live-preview-form textarea').bind('blur keyup',updatePreview);
});

function updatePreview(){
    var tinymce = $('#lp-message');
    tinymce.html($('#message').val());
}

Answer 1

抱歉，您的代码中有很多错误。:/

这是 javascript 部分下您需要的唯一代码。

tinymce.init({
    selector: "textarea",
    setup : function(ed) {
        ed.on("keyup", function(){
            $('#lp-message').html(tinymce.activeEditor.getContent());
        });
   }
});

这是你的 html 代码：

<div id="live-preview-form">
    <textarea id="message">Easy! You should check out MoxifvdfvdfvfdveManager!</textarea></div>
<div id="lp-message"></div>

如您所见，您必须使用tinymce API 从编辑器获取内容。并且“keyup”事件应该在编辑器上使用，而不是在“textarea”上使用。

我希望我对你有帮助。:)