提交prism.js时，tinymce删除跨度

Question

到目前为止，当我在tinymce文本编辑器中打开prism.js时，它显得很好，它突出了代码，当然因为当我检查时，标签＆lt; span＆gt;存在于＆lt; pre＆gt;内标签。问题是，在提交时，＆lt; span＆gt;标签不再关注。他们只是消失了。怎么了？它是prism.js作为tinymce插件的着名未解决的问题吗？或者我错过了什么？我只需要＆lt; span＆gt;提交时在那里。就是这样。

请帮忙。提前谢谢。

/ -------------为清楚起见，这里是插件代码--------------------- < / EM> /

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中看到的一样，您需要添加

{{1}}

或它的变体，具体取决于您在页面上未使用TinyMCE的用例。看到这里：https://prismjs.com/extending.html#api