按键上的Tinymce我试着显示内容的预览

我正在尝试下面的代码

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

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

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

Answer 1

我在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（“更改”）用于检测鼠标事件的更改，如果您单击工具栏图标或从菜单中选择。 它还能够检测键盘事件，但只能在失去焦点（非实时）后才能检测到。

on（“keyup”）用于检测实时键盘事件的变化

Answer 2

我尝试用下面的代码工作正常

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

Answer 3

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

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

如果需要，还可以迭代editors数组。