Html Tinymce 4&x2B;不将样式应用于跨度标记

Html Tinymce 4&x2B;不将样式应用于跨度标记,html,css,tinymce-4,Html,Css,Tinymce 4,我使用tinymce进行内容设计,但在将颜色应用于文本时出现问题。它以前可以工作,但突然停止工作,所以我调试并发现这是由于为标记编写了以下代码: extended_valid_elements: 'span', 我使用它是因为除此之外,它不允许我为它添加类,但现在它没有将样式应用于其中的文本。有没有同时实现这两个需求的解决方案?我的完整代码如下: tinymce.init({ selector: "textarea:not(.mceNoEditor)", extended_valid_elem

我使用tinymce进行内容设计,但在将颜色应用于文本时出现问题。它以前可以工作,但突然停止工作,所以我调试并发现这是由于为标记编写了以下代码:

extended_valid_elements: 'span',
我使用它是因为除此之外,它不允许我为它添加类,但现在它没有将样式应用于其中的文本。有没有同时实现这两个需求的解决方案?我的完整代码如下:

tinymce.init({
selector: "textarea:not(.mceNoEditor)",
extended_valid_elements: 'span',
browser_spellcheck: true,
force_br_newlines: true,
force_p_newlines: false,
forced_root_block: '',
font_formats: 'Arial=arial,helvetica,sans-serif;Courier New=courier new,courier,monospace;AkrutiKndPadmini=Akpdmi-n;Comic Sans MS=comic sans ms,sans-serif;Times New Roman=times new roman,times;',
fontsize_formats: '8pt 10pt 12pt 14pt 18pt 24pt 36pt',
plugins: ["textcolor", "advlist autolink lists link image charmap print preview anchor", "searchreplace visualblocks code fullscreen", "insertdatetime media table paste"],
toolbar: "fontselect | fontsizeselect | forecolor backcolor | insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
height: "200",
content_css: [
    '//fonts.googleapis.com/css?family=Lato:300,300i,400,400i',
    '//cdnjs.cloudflare.com/ajax/libs/prism/0.0.1/prism.css',
    '//www.tinymce.com/css/codepen.min.css'
],
image_title: 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: '../postAcceptor',
//    images_upload_base_path: 'http://localhost/colorin',
// 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];

        // 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 = (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: file.name});
    };

    input.click();
}
});

你发现问题了吗。同样,当我保存代码示例并获取
tinymce.activeEditor.getContent()
时,它不会保存像
token…
这样的css类,然后代码就没有颜色了。如果您发现了问题。当我保存代码示例并获取
tinymce.activeEditor.getContent()
时,我也会这样做。它不会保存css类,比如
token…
,然后代码就不会着色