2011-04-23 232 views
0

我想下面的代码TinyMCE的按键时,我尝试显示内容的预览

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

,但我不使用jQuery TinyMCE的编辑想使用jQuery TinyMCE的和其他的jQuery UI组件无法正常工作,所以我直接使用tinymce组件。

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

回答

0

我尝试用下面的代码在TinyMCE的4.x中使用此工作的罚款

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; 
} 
2

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()); 
     }); 
    } 
}); 

说明:

上( “变”)是检测鼠标事件的变化,如果你点击工具栏图标或从菜单中选择。它也能够检测到键盘事件,但只能在失去焦点(不是实时)之后。

上(“KEYUP”)可以通过获取活动的编辑器检测到实时键盘事件

0

能initialisasing后进行的变化,以及:

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

还有一个editors阵列可以如果你需要它迭代。

相关问题