提交prism.js时删除span

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

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

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

 Prism.highlightAll() 

或者根据页面上不调用TinyMCE的用例而改变它。见此处：https://prismjs.com/extending.html#api