javascript - 侧面预览tinyMCE内容

Question

我需要在同一页面上显示实时预览。当用户设置文本格式或更改其他输入值(文本/选择/复选框等)时，我需要显示其他输入值的内容与侧面 div 中的 tinyMCE 文本区域内的内容的混合。

有人可以指导我实现这一点吗？

检查https://app.classeur.io/#!/files/zvbiZEbizyUHb2aUS9xP并单击“侧面预览”链接以查看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()); 
        }); 
      }
});