wangEditor rich text editor call development record 2 (V5 version custom paste, solution to remove redundant style codes copied from word or web page html)

When using the wangEditor rich text editor, when copying text content from a word document or other webpage and pasting it into the editor, if you do not filter out the styles that come with the copied text, the copied content will be messy, and even cannot be added to the database middle. In order to solve this problem, we need to process the content pasted from word, remove redundant codes, and make the pasted text more concise and lightweight.

1. Environmental Description

• wangEditor, V5 version;
• Editor configuration parameters: customPaste, that is, custom paste, which can prevent the default paste of the editor and realize its own paste logic.
• Instructions for use, Portal

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 数据（如从 word wsp 复制粘贴）

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

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

    // 阻止默认的粘贴行为
    event.preventDefault()
    return false

    // 继续执行默认的粘贴行为
    // return true
}

2. Solutions

    //默认粘帖
    editorConfig.customPaste = (editor, event) => {
    
    
        const text = event.clipboardData.getData('text/plain') // 获取粘贴的纯文本
        // 同步
        editor.insertText(text);
        // 阻止默认的粘贴行为
        event.preventDefault();
        return false
    }

3. Complete code

//wangEditor配置项
    const {
    
    
        createEditor, createToolbar
    } = window.wangEditor

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

    //默认粘帖
    editorConfig.customPaste = (editor, event) => {
    
    
        const text = event.clipboardData.getData('text/plain') // 获取粘贴的纯文本
        // 同步
        editor.insertText(text);
        // 阻止默认的粘贴行为
        event.preventDefault();
        return false
    }

    //上传图片
    editorConfig.MENU_CONF['uploadImage'] = {
    
    
        fieldName: 'file',//后台获取文件方式;
        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'
    })

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

Summarize

The wangEditor rich text editor can remove the copied Word style:

1. Consistency: The copied Word styles may not match the editor's current styles, which can result in inconsistent appearance of the text. In order to maintain the consistency of the text in the editor, it is necessary to remove the copied Word styles.

2. Compatibility: Styles in Word may contain complex formatting and special markup that may not be supported in the editor. In order to ensure that the copied text is displayed normally in the editor, it is necessary to remove the copied Word style.

3. Clean up redundant code: Word styles often generate a lot of redundant code in HTML, which can lead to slow page loading and unnecessary network traffic. By removing copied Word styles, it can help reduce redundant code and improve page loading speed.

To sum up, removing copied Word styles can improve text consistency, compatibility, and optimize page loading.

---

@ Leak sometimes