侧面预览tinyMCE内容

Question

我需要在同一页面上显示实时预览。当用户格式化文本或更改其他输入值（text/select/checkbox 等）时，我需要在一侧 div 显示其他输入值的内容与 tinyMCE 文本区域内内容的混合。

有人能指导我实现吗？

选中 https://app.classeur.io/#!/files/zvbiZEbizyUHb2aUS9xP 并单击侧面预览 link 以查看我需要的 tinyMCE 行为。

Answer 1

基本上我是通过TinyMCE提供的change和keyup事件实现的

这是配置的一个片段。

tinyMCE.init({
      selector: "textarea.tinymce",
      toolbar: ["undo redo | bold italic | styleselect | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent","link image media | code"],
      plugins: "image imagetools link paste media code",
      setup: function(ed) { 
        ed.on('change', function(e) {  
          previewContent(ed.getContent()); 
        }); 

        ed.on('keyup', function(e) { 
          previewContent(ed.getContent()); 
        }); 
      }
});

侧面预览tinyMCE内容

side preview tinyMCE content

html

javascript

jquery

tinymce-4