wangEditor富文本编辑器的调用开发实录2(V5版本自定义粘贴,去除复制word或网页html冗余样式代码的解决方案)

简介: wangEditor富文本编辑器的调用开发实录2(V5版本自定义粘贴,去除复制word或网页html冗余样式代码的解决方案)

在使用wangEditor富文本编辑器时,当从word文档或者其他网页复制文本内容粘贴到编辑器中,如果不过滤掉复制文本中自带的样式,会导致复制的内容比较错乱,甚至无法添加到数据库中。为了解决这个问题,我们需要对从word中粘贴的内容进行处理,把多余的代码剔除,让粘贴后的文本变得更加简洁和轻量。


1.环境说明

  • wangEditor,V5版本;
  • 编辑器配置参数:customPaste,即自定义粘贴,可阻止编辑器的默认粘贴,实现自己的粘贴逻辑。
  • 使用说明,传送门
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.解决方案

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

3.完整代码

//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'
    })


总结

wangEditor富文本编辑器去除复制的Word样式可以实现:


  1. 一致性:复制的Word样式可能与编辑器当前的样式不匹配,这会导致文本的外观不一致。为了保持编辑器中文本的一致性,去除复制的Word样式是必要的。
  2. 兼容性:Word中的样式可能包含复杂的格式和特殊的标记,这些标记可能在编辑器中不被支持。为了确保复制的文本在编辑器中正常显示,去除复制的Word样式是必要的。
  3. 清理冗余代码:Word样式在HTML中通常会生成大量的冗余代码,这可能导致页面加载缓慢和不必要的网络流量。通过去除复制的Word样式,可以帮助减少冗余代码,提高页面加载速度。

综上所述,去除复制的Word样式可以提高文本的一致性、兼容性,并优化页面加载效果。


@漏刻有时


相关文章
|
18天前
|
存储 移动开发 编解码
基于HTML5开发的Markdown在线编辑器
Markdown是一种轻量级标记语言,以其简洁易读的格式而备受程序员和作者们的青睐。随着互联网的发展,越来越多的在线Markdown编辑器应运而生,为用户提供了更加便捷、高效的写作和编辑环境。本文将探讨基于HTML5开发的Markdown在线编辑器的设计原理、功能特点以及技术优势。
52 4
|
8天前
|
缓存 移动开发 前端开发
在PWA的开发中,HTML与CSS作为前端技术的基础,发挥着至关重要的作用
【6月更文挑战第14天】PWA(渐进式网页应用)借助HTML和CSS,提供接近原生应用的体验。HTML构建页面结构和内容,响应式设计适应各种设备,语义化标签提升可访问性,Manifest文件配置应用元数据,离线页面保证无网时体验。CSS则用于定制主题样式,创建动画效果,实现响应式布局,并管理字体和图标。两者协同工作,确保PWA在不同环境下的优秀性能和用户体验。随着前端技术进步,HTML与CSS在PWA中的应用将更加深入。
19 2
|
30天前
|
存储 移动开发 编解码
基于HTML5开发的Markdown在线编辑器
Markdown是一种轻量级标记语言,以其简洁易读的格式而备受程序员和作者们的青睐。随着互联网的发展,越来越多的在线Markdown编辑器应运而生,为用户提供了更加便捷、高效的写作和编辑环境。本文将探讨基于HTML5开发的Markdown在线编辑器的设计原理、功能特点以及技术优势。
33 1
基于HTML5开发的Markdown在线编辑器
|
15天前
|
移动开发 前端开发 JavaScript
HTML5 Canvas自定义圆角矩形与虚线(Rounded Rectangle and Dash Line)
HTML5 Canvas自定义圆角矩形与虚线(Rounded Rectangle and Dash Line)
16 3
|
18天前
使用LabVIEW打开默认应用程序中的文档(PDF,Word,Excel,Html)
使用LabVIEW的"Open a Document on Disk.vi",存于<LabVIEW>\vi.lib\Platform\browser.llb,可让默认应用打开硬盘文档。此VI仅基础打开功能,高级控制推荐LabVIEW Report Generation Toolkit或ActiveX。注意:避免版本升级问题,最好将VI复制到vi.lib外的目录。
|
1天前
|
Java Maven
Java在线预览(word转html)--强势推荐
Java在线预览(word转html)--强势推荐
5 0
|
29天前
|
移动开发 网络协议 安全
HTML5页面被运营商DNS问题及解决方案,app中h5页面源码的获取
HTML5页面被运营商DNS问题及解决方案,app中h5页面源码的获取
85 4
|
16天前
|
存储 缓存 开发工具
初识Unity——unity的安装以及工程介绍(安装unity hub、版本选择、中文设置、安装编辑器、Assets文件、Library 文件、[ProjectName].sln 文件)
初识Unity——unity的安装以及工程介绍(安装unity hub、版本选择、中文设置、安装编辑器、Assets文件、Library 文件、[ProjectName].sln 文件)
45 0
|
1月前
|
移动开发 前端开发 JavaScript
:掌握移动端开发:HTML5 与 CSS3 的高效实践
:掌握移动端开发:HTML5 与 CSS3 的高效实践 “【5月更文挑战第6天】”
39 1
|
1月前
|
移动开发 JavaScript 前端开发
APP的HTML5页面经过运营商网络被植入手机管家问题及分析,解决方案见新文章
APP的HTML5页面经过运营商网络被植入手机管家问题及分析,解决方案见新文章
24 0

热门文章

最新文章