想要查看呈现的 HTML 格式与 TinyMCE Codesample 插件相同

Question

这是我的编辑页面的图片，其中包含 TinyMCE： In my edit page

在 TinyMCE 之外呈现时，代码示例格式不显示 view page。我希望在呈现内容时使用与使用代码示例插件时在 TinyMCE 中看到的格式相同的格式。

这是我用来调用 TinyMCE (4.3.2) 的代码。

tinymce.init({
  selector: 'textarea',
  height: 200,
  language: 'bn_BD',
  plugins: [
    'advlist autolink lists link image charmap print hr anchor pagebreak',
    'searchreplace wordcount visualblocks visualchars code codesample fullscreen',
    'insertdatetime media nonbreaking table contextmenu directionality',
    'emoticons template paste textcolor colorpicker textpattern imagetools'
  ],
  setup: function(editor) {
      editor.on('FullscreenStateChanged', function(e) {
          if(e.state) {
              $('header').hide();
          }
          else {
              $('header').show();
          }
      });
  },
  toolbar: 'undo redo | styleselect | bold italic underline | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | codesample link image media | forecolor backcolor',
  image_advtab: true,
  imagetools_cors_hosts: ['celica.muktosoft.com'],
  templates: [
    { title: 'Lesson Template', content: 'Test 1' }
  ],
  file_browser_callback: function(field_name, url, type, win) {
    if(type=='image') {
        document.getElementById("fileupload_field_id").value = field_name;
        document.getElementById("fileupload").value = "";
        document.getElementById("fileupload").click();
    }
  },
  content_css: [
    '//fast.fonts.net/cssapi/e6dc9b99-64fe-4292-ad98-6974f93cd2a2.css',
    '//www.tinymce.com/css/codepen.min.css'
  ]
});

Answer 1

解决这个问题的关键是知道 TinyMCE 依赖 Prism.js 来实现语法高亮显示功能。如果您想从 TinyMCE 中提取内容并将其显示在其他地方，您需要...

第 1 步：

在您的页面中包含 Prism.js 和 prism.css - 这些可以从 Prism 网站下载。

第 2 步：

使用 TinyMCE 的 API 从编辑器中提取内容。例如：

var htmlToLoad = tinyMCE.get('area3').getContent();

第 3 步：

将内容放入 HTML 块元素中：

document.getElementById("result").innerHTML = htmlToLoad;

第 4 步：

运行 Prism的高亮功能：Prism.highlightAll();

这会触发 Prism 重新评估 DOM 它应该突出显示的内容 - 它不会自动执行此操作。

Answer 2

请务必在您的 "view page" 中包含来自 prism.js download page（select 您需要的语言！）的 CSS（和 JavaScript）文件。

使用Codesample插件在TinyMCE中输入代码片段时，记得select在Codesample的window顶部对应的语言...;-)

想要查看呈现的 HTML 格式与 TinyMCE Codesample 插件相同

Want to see rendered HTML with same formatting as TinyMCE Codesample Plugin

javascript

formatting

tinymce

nodes

node.js