Question

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

在TinyMCE之外呈现时，代码示例格式化未显示view page。我想在渲染内容时使用相同的格式，就像我在使用codesample插件时在TinyMCE中看到的那样。

这是我用来调用TinyMCE（4.3.2）的代码。

＆＃13;

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'
  ]
});

＆＃13;

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

请务必在您的＆＃34;查看页面＆＃34;中包含prism.js download page中的CSS（和JavaScript）文件（选择您需要的语言！）。

使用Codesample插件在TinyMCE中输入代码片段时，请记住在代码示例窗口顶部选择相应的语言...; - ）

想要查看与TinyMCE Codesample Plugin

2 个答案: