将粘贴内容复制到 TinyMCE 输入会导致 HTML 臃肿

Question

我将 TinyMCE 用于各种项目。我遇到的问题是 ATM 是很多用户复制并粘贴来自 Word 或 OpenOffice 等源的内容到 TinyMCE 输入中。这通常会导致代码臃肿（例如，像 <span lang="EN-GB"> 这样的东西被 OpenOffice 接管了）。 TinyMCE 的清理似乎并没有删除这些标签。有没有办法在文本粘贴到 TinyMCE 输入区域之前删除所有格式 ？还是有其他方法可以防止这种臃肿的代码，例如通过 PHP 过滤服务器端？

Answer 1

我知道这是一个 opd 问题，但为了其他可能正在寻找这个答案的人的利益（就像我一样！），TinyMCE 现在包括控制粘贴到文本框中的内容的能力。

在初始化调用中，添加“粘贴”插件，然后设置您需要的任何选项，例如

tinyMCE.init({
    ...
    plugins: "paste",
    paste_auto_cleanup_on_paste : true,
    paste_remove_styles: true,
    paste_remove_styles_if_webkit: true,
    paste_strip_class_attributes: "all",
    paste_remove_spans : true,
    ...
});

您可以在tinyMCE wiki中看到所有选项

Answer 2

我使用以下 c 函数 on_preprocess 删除所有标签：

strip_tags = function (str, allowed_tags) {
    var key = '', allowed = false;
    var matches = [];    var allowed_array = [];
    var allowed_tag = '';
    var i = 0;
    var k = '';
    var html = ''; 
    var replacer = function (search, replace, str) {
        return str.split(search).join(replace);
    };
     // Build allowes tags associative array
    if (allowed_tags) {
        allowed_array = allowed_tags.match(/([a-zA-Z0-9]+)/gi);
    }
     str += '';

    // Match tags
    matches = str.match(/(<\/?[\S][^>]*>)/gi);
     // Go through all HTML tags
    for (key in matches) {
        if (isNaN(key)) {
            // IE7 Hack
            continue;        }

        // Save HTML tag
        html = matches[key].toString();
         // Is tag not in allowed list? Remove from str!
        allowed = false;

        // Go through all allowed tags
        for (k in allowed_array) {            // Init
            allowed_tag = allowed_array[k];
            i = -1;

            if (i != 0) { i = html.toLowerCase().indexOf('<'+allowed_tag+'>');}           
            if (i != 0) { i = html.toLowerCase().indexOf('<'+allowed_tag+' ');}
            if (i != 0) { i = html.toLowerCase().indexOf('</'+allowed_tag)   ;}

            // Determine
            if (i == 0) {                allowed = true;
                break;
            }
        }
         if (!allowed) {
            str = replacer(html, "", str); // Custom replace. No regexing
        }
    }

     return str;
};

在我放置的 tinymce 初始化中

paste_preprocess : function(pl, o) {

// remove Clipboard header on MAC
var pos_sel = o.content.search("EndSelection:");
var pos_fra = o.content.search("EndFragment:");
var mac_header_found = false;

if (o.content.search("Version:") == 0 && pos_sel < 135 && pos_sel > 120){
    o.content = o.content.substring(pos_sel+23);
    mac_header_found = true;
}
else if (o.content.search("Version:") == 0 && pos_fra < 80 && pos_fra > 75){
    o.content = o.content.substring(pos_fra+23);
    mac_header_found = true;
}

// Copy from Word oder OpenOffice (MAC) - remove header
if (o.wordContent || mac_header_found) {
    // first style tag + content to be removed
    var pos_start_style = o.content.search('<style');
    var pos_end_style = o.content.search('</style>');
    if (pos_start_style > 0 && pos_end_style > pos_start_style) {
        o.content = o.content.substring(0, pos_start_style).concat(o.content.substring(pos_end_style + 8));
    }
    // complete Worddokument gets pasted
    else {
        var pos_start_p = o.content.search('<p');
        if (pos_start_p) o.content = o.content.substring(pos_start_p);
    }
}

    o.content = ir.im.strip_tags( o.content, '' );

// NO-Break Zero-width space if empty
if (o.content == '') {
    o.content = '&#65279;';
}   
},