4

到目前为止,当我在 tinymce 文本编辑器中打开 prism.js 时,它看起来很好,它突出显示了代码,当然因为当我检查时,标签 <span> 存在于 <pre> 标签内。问题是,提交时, <span> 标记不再跟随。他们只是消失了。怎么了?prism.js作为tinymce插件是著名的未解决问题吗?还是我错过了什么?我只需要 <span> 在提交时在那里。就这样。

请帮忙。提前致谢。

/ ------------- 为了清楚起见,这里是插件代码 ------------- /

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();
    }
});
4

1 回答 1

0

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

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

 Prism.highlightAll() 

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

于 2018-08-30T19:12:49.870 回答