想要查看与 TinyMCE Codesample 插件格式相同的渲染 HTML答案

【问题标题】：Want to see rendered HTML with same formatting as TinyMCE Codesample Plugin想要查看与 TinyMCE Codesample 插件格式相同的渲染 HTML
【发布时间】：2016-04-03 06:53:24
【问题描述】：

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

在 TinyMCE 之外呈现时，代码示例格式不显示 view page。我希望在渲染内容时使用与使用 codesample 插件时在 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'
  ]
});

【问题讨论】：

标签： javascript node.js formatting tinymce nodes

【解决方案1】：

确保在您的“查看页面”中包含来自 prism.js download page 的 CSS（和 JavaScript）文件（选择您需要的语言！）。

使用 Codesample 插件在 TinyMCE 中输入代码 sn-p 时，记得在 Codesample 窗口顶部选择对应的语言... ;-)

【讨论】：

【解决方案2】：

解决这个问题的关键是知道 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 是否应该突出显示的内容 - 它不会自动执行此操作。

【讨论】：

我已经在我的页面中包含了 prism.css 和 prism.js，但是对于 C 代码以及 java、ruby、c#、c++、python 等也没有显示语法高亮。有趣的一点是语法高亮正在显示完美适用于 javascript、css、HTML 代码。怎么办：（
转到 Prism.js 并确保选择所有用于构建 Prism.js 的语言，包括您需要的语言。
谢谢先生，只有 php 没有显示正确的高亮显示
Prism 的默认 JS/CSS 不包含 PHP ...您必须构建一个包含 PHP 作为语言的自定义 Prism JS/CSS。这是在 Prism.js 网站上完成的。
我遇到了同样的问题。当我将所有内容保存到后端然后将其检索回来时，它不会显示代码突出显示。当我在div#result 上将临时保存为innerHtml 时，它会显示，但当我保存它并在其他页面上查看此内容时不会显示。任何想法。谢谢