javascript - tinymce 在提交 prism.js 时删除跨度

Question

到目前为止，当我在 tinymce 文本编辑器中打开 prism.js 时，它看起来很好，它突出显示了代码，当然是因为当我检查时，标签 存在于

 标签内。问题是，提交后， 标签不再跟随。他们就这样消失了。怎么了？它是 prism.js 作为 tinymce 插件的著名未解决问题吗？或者我错过了什么？我只需要  在提交时就在那里。就这样。
请帮忙。提前致谢。
/------------ 为了清楚起见，这里是插件代码--------------------/
 
tinymce.init({
    selector: '.content_textarea',
    plugins: 'advlist autolink link image lists charmap print preview codesample emoticons',
    toolbar: 'undo redo | styleselect | bold italic | numlist bullist | codesample | link image | emoticons',
    link_class_list: [
        {title: 'None', value: ''},
        {title: 'Demo', value: 'btn demo'},
        {title: 'Download', value: 'btn download'}
    ],
    codesample_languages: [
        {text: 'HTML/XML', value: 'markup'},
        {text: 'JavaScript', value: 'javascript'},
        {text: 'CSS', value: 'css'},
        {text: 'PHP', value: 'php'},
        {text: 'Ruby', value: 'ruby'},
        {text: 'Python', value: 'python'},
        {text: 'Java', value: 'java'},
        {text: 'C', value: 'c'},
        {text: 'C#', value: 'csharp'},
        {text: 'C++', value: 'cpp'}
    ],
    valid_elements: "*[*]",
    image_dimensions: false,

    image_title: true, 
    image_caption: true,
    // enable automatic uploads of images represented by blob or data URIs
    automatic_uploads: true,
    // URL of our upload handler (for more details check: https://www.tinymce.com/docs/configure/file-image-upload/#images_upload_url)
    images_upload_url: base_url()+'admin_crud/img-upload-tinymce',
    // here we add custom filepicker only to Image dialog
    file_picker_types: 'image', 
    // and here's our custom image picker
    file_picker_callback: function(cb, value, meta) {
        var input = document.createElement('input');
        input.setAttribute('type', 'file');
        input.setAttribute('accept', 'image/*');

        // Note: In modern browsers input[type="file"] is functional without 
        // even adding it to the DOM, but that might not be the case in some older
        // or quirky browsers like IE, so you might want to add it to the DOM
        // just in case, and visually hide it. And do not forget do remove it
        // once you do not need it anymore.

        input.onchange = function() {
          var file = this.files[0];
          var orig_filename = this.files[0].name;
          orig_filename = remove_ext(orig_filename);

          // Note: Now we need to register the blob in TinyMCEs image blob
          // registry. In the next release this part hopefully won't be
          // necessary, as we are looking to handle it internally.
          var id = orig_filename + (new Date()).getTime();
          var blobCache = tinymce.activeEditor.editorUpload.blobCache;
          var blobInfo = blobCache.create(id, file);
          blobCache.add(blobInfo);

          // call the callback and populate the Title field with the file name
          cb(blobInfo.blobUri(), { title: remove_ext(file.name) });
        };

        input.click();
    }
});
 

Answer 1

这些标签由 Prism 添加。 TinyMCE 调用 Prism，当您在 TinyMCE 中添加、编辑或查看您的内容时，您将看到代码突出显示。在 TinyMCE 之外查看导致看不到代码亮点，这是因为尚未调用 Prism。

为了使您的代码看起来像您在 TinyMCE 中看到的那样，您需要添加

 Prism.highlightAll() 

或其变体，具体取决于您页面上的用例，不调用 TinyMCE。看这里:https://prismjs.com/extending.html#api