javascript - 使用 TinyMCE 进行实时预览(TinyMCE 的值(value))

Question

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

JS Fiddle

$(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”上。

希望对您有所帮助。 :)