时间上的按键,我试图显示内容的预览

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

本文关键字:显示 时间上      更新时间:2023-09-26

我正在尝试下面的代码

 $('textarea.tinymce').keypress(function(){
      dealDescription = $('textarea.tinymce').tinymce().execCommand('mcePreview');
      $("#deal_preview div").text(dealDescription);
 });

但我不使用jquery tinymce编辑器假设我使用jquery tinymce和其他jquery UI组件不能正常工作,所以我直接使用tinymce组件。

现在我需要在每次按键的预览框中显示内容预览

我在tinymce 4.x中使用这个

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

解释:

on("change")用于在单击工具栏图标或从菜单中选择时检测鼠标事件的变化。它也能够检测键盘事件,但只有在失去焦点后(非实时)。

on("keyup")用于检测实时键盘事件的变化

也可以在初始化之后通过获取活动编辑器来完成:

tinyMCE.activeEditor.on('keyup', function () {
    // your nicely formatted code here
});

还有一个editors数组,如果你需要,你可以迭代它。

我尝试下面的代码工作良好

tinyMCE.init({
    mode : "exact",
    elements : "text",
    setup : function (theEditor) {
        theEditor.onKeyPress.add(
            function (theEditor) {
                previewContent(theEditor);
            }
        );
    },
});
function previewContent(editorObject){
     var content = editorObject.getContent();
     document.getElementById("previewContent").innerHTML = content;
}