FastAdmin Summernote 清除格式

需求是这样的，录入内容时，大多是从 Word 中粘贴过来的，内容很少，但实际代码却很多，存储时，提示保存失败。
最简单的方法是调整数据库字段长度，但这样不是最好的解决方法。

留意，必须在，/addons/summernote/bootstrap.js 文件中，增加内容，否则在 FastAdmin 后台清除插件缓存后，/public/assets/js/addons.js 会被覆盖！

另一种方式是通过对 Summernote 修改，实现粘贴即去除格式，或者，通过点击按钮去除格式。（插件自带的清除格式按钮，效果不是很好）。

方法一、粘贴后自动清除格式

在 /addons/summernote/bootstrap.js 文件中，增加函数：

// 清理粘贴的内容
function CleanPastedHTML(input) {
    let i;
    // 1. 移除换行符 和 Mso 类
    const stringStripper = /(\n|\r| class=(")?Mso[a-zA-Z]+(")?)/g;
    let output = input.replace(stringStripper, ' ');
    // 2. Word 脚本生成的 HTML 注释
    const commentStripper = new RegExp('<!--(.*?)-->', 'g');
    output = output.replace(commentStripper, '');
    let tagStripper = new RegExp('<(/)*(meta|link|span|\\?xml:|st1:|o:|font|b|i|strong|u|strike)(.*?)>', 'gi');
    // 3. 如果有内容则删除标签
    output = output.replace(tagStripper, '');
    // 4. 移除所有内容，像 '<style(.)style(.)>'
    const badTags = ['style', 'script', 'applet', 'embed', 'noframes', 'noscript'];

    for (i = 0; i< badTags.length; i++) {
        tagStripper = new RegExp('<'+badTags[i]+'.*?'+badTags[i]+'(.*?)>', 'gi');
        output = output.replace(tagStripper, '');
    }
    // 5. 移除属性，如 ' style="..."'
    const badAttributes = ['style', 'start'];
    for (i = 0; i< badAttributes.length; i++) {
        const attributeStripper = new RegExp(' ' + badAttributes[i] + '="(.*?)"', 'gi');
        output = output.replace(attributeStripper, '');
    }
    return output;
}

及在这个文件中，搜索 callback ，并增加以下：

（可以不使用 bufferText = CleanPastedHTML(bufferText);，只做简单清理）

onPaste: function (ne) {
    let bufferText = ((ne.originalEvent || ne).clipboardData || window.clipboardData).getData('Text/plain');
    bufferText = CleanPastedHTML(bufferText);
    ne.preventDefault ? ne.preventDefault() : (ne.returnValue = false);
    setTimeout(function () {
        document.execCommand("insertText", false, bufferText);
    }, 10);
},

方法二：手动清除格式

即，增加按钮，点击后清除格式。仍是在 /addons/summernote/bootstrap.js 文件中，增加函数：

// 自定义 清除格式按钮
const CleanWordButton = function (context) {
    const ui = $.summernote.ui;
    const button = ui.button({
        contents: '<i class="note-icon-eraser"/>',
        tooltip: '清除格式',
        click: function () {
            //  清除img的wrap元素
            let str = context.invoke('code');
            str = CleanPastedHTML(str);
            context.invoke('code', str);
        }
    });
    return button.render();
};

及搜索 toolbar 并增加 word 项，及在 buttons 中定义 word 按钮要执行方法：

toolbar: [
    ['view', ['fullscreen', 'codeview', 'word', 'help']],
],
buttons: {
    image: imageButton,
    attachment: attachmentButton,
    word: CleanWordButton
},

至此完成。

参考资料：

相关文章：