tinymce удалить span при отправке prism.js

Question

До сих пор, когда я открываю prism.js в текстовом редакторе tinymce, он выглядит нормально, он подсвечивает код, конечно, потому что когда я проверяю, тег существует внутри тега

. Проблема в том, что при отправке теги  больше не следуют. Они просто исчезают. В чем дело? Знаменитая нерешенная проблема 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