在使用wangEditor富文本編輯器時(shí)，當(dāng)從word文檔或者其他網(wǎng)頁(yè)復(fù)制文本內(nèi)容粘貼到編輯器中，如果不過(guò)濾掉復(fù)制文本中自帶的樣式，會(huì)導(dǎo)致復(fù)制的內(nèi)容比較錯(cuò)亂，甚至無(wú)法添加到數(shù)據(jù)庫(kù)中。為了解決這個(gè)問(wèn)題，我們需要對(duì)從word中粘貼的內(nèi)容進(jìn)行處理，把多余的代碼剔除，讓粘貼后的文本變得更加簡(jiǎn)潔和輕量。

1.環(huán)境說(shuō)明

• wangEditor，V5版本；
• 編輯器配置參數(shù)：customPaste，即自定義粘貼，可阻止編輯器的默認(rèn)粘貼，實(shí)現(xiàn)自己的粘貼邏輯。
• 使用說(shuō)明，傳送門

editorConfig.customPaste = (editor, event) => {

    // const html = event.clipboardData.getData('text/html') // 獲取粘貼的 html
   const text = event.clipboardData.getData('text/plain') // 獲取粘貼的純文本
    // const rtf = event.clipboardData.getData('text/rtf') // 獲取 rtf 數(shù)據(jù)（如從 word wsp 復(fù)制粘貼）

    // 同步
    editor.insertText('xxx')

    // 異步
    setTimeout(() => {
        editor.insertText('yy')
    }, 1000)

    // 阻止默認(rèn)的粘貼行為
    event.preventDefault()
    return false

    // 繼續(xù)執(zhí)行默認(rèn)的粘貼行為
    // return true
}

2.解決方案

    //默認(rèn)粘帖
    editorConfig.customPaste = (editor, event) => {
        const text = event.clipboardData.getData('text/plain') // 獲取粘貼的純文本
        // 同步
        editor.insertText(text);
        // 阻止默認(rèn)的粘貼行為
        event.preventDefault();
        return false
    }

3.完整代碼

//wangEditor配置項(xiàng)
    const {
        createEditor, createToolbar
    } = window.wangEditor

    const editorConfig = {
        MENU_CONF: {},
        placeholder: 'Type here...',
        onChange(editor) {
            const html = editor.getHtml()
            //console.log(html);
        }
    }

    //默認(rèn)粘帖
    editorConfig.customPaste = (editor, event) => {
        const text = event.clipboardData.getData('text/plain') // 獲取粘貼的純文本
        // 同步
        editor.insertText(text);
        // 阻止默認(rèn)的粘貼行為
        event.preventDefault();
        return false
    }

    //上傳圖片
    editorConfig.MENU_CONF['uploadImage'] = {
        fieldName: 'file',//后臺(tái)獲取文件方式;
        server: '?m=Upload&a=uploadDeal&act=wangEditor&fromType=module&token=' + token,
        maxFileSize: 1 * 1024 * 1024, // 1M
        allowedFileTypes: ['image/*'],
        onFailed(file, res) {
            layer.msg(res.message);
        },
        onError(file, err, res) {
            layer.msg(file.name + err);
        }
    }
    const editor = createEditor({
        selector: '#editor-container',
        html: '',
        config: editorConfig,
        mode: 'default', // or 'simple'
    })

    //工具欄配置項(xiàng)
    const toolbarConfig = {}
    toolbarConfig.excludeKeys = ['uploadVideo', 'todo']
    const toolbar = createToolbar({
        editor,
        selector: '#toolbar-container',
        config: toolbarConfig,
        mode: 'default', // or 'simple'
    })

總結(jié)

wangEditor富文本編輯器去除復(fù)制的Word樣式可以實(shí)現(xiàn)：

1. 一致性：復(fù)制的Word樣式可能與編輯器當(dāng)前的樣式不匹配，這會(huì)導(dǎo)致文本的外觀不一致。為了保持編輯器中文本的一致性，去除復(fù)制的Word樣式是必要的。

2. 兼容性：Word中的樣式可能包含復(fù)雜的格式和特殊的標(biāo)記，這些標(biāo)記可能在編輯器中不被支持。為了確保復(fù)制的文本在編輯器中正常顯示，去除復(fù)制的Word樣式是必要的。

3. 清理冗余代碼：Word樣式在HTML中通常會(huì)生成大量的冗余代碼，這可能導(dǎo)致頁(yè)面加載緩慢和不必要的網(wǎng)絡(luò)流量。通過(guò)去除復(fù)制的Word樣式，可以幫助減少冗余代碼，提高頁(yè)面加載速度。

綜上所述，去除復(fù)制的Word樣式可以提高文本的一致性、兼容性，并優(yōu)化頁(yè)面加載效果。

@漏刻有時(shí)文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-563048.html

到了這里，關(guān)于wangEditor富文本編輯器的調(diào)用開(kāi)發(fā)實(shí)錄2(V5版本自定義粘貼，去除復(fù)制word或網(wǎng)頁(yè)html冗余樣式代碼的解決方案)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！