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

这篇具有很好参考价值的文章主要介绍了wangEditor富文本编辑器的调用开发实录2(V5版本自定义粘贴,去除复制word或网页html冗余样式代码的解决方案)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

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

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

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富文本编辑器的调用开发实录2(V5版本自定义粘贴,去除复制word或网页html冗余样式代码的解决方案),漏刻有时,javascript,word,html,前端

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

总结

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

  1. 一致性:复制的Word样式可能与编辑器当前的样式不匹配,这会导致文本的外观不一致。为了保持编辑器中文本的一致性,去除复制的Word样式是必要的。

  2. 兼容性:Word中的样式可能包含复杂的格式和特殊的标记,这些标记可能在编辑器中不被支持。为了确保复制的文本在编辑器中正常显示,去除复制的Word样式是必要的。

  3. 清理冗余代码:Word样式在HTML中通常会生成大量的冗余代码,这可能导致页面加载缓慢和不必要的网络流量。通过去除复制的Word样式,可以帮助减少冗余代码,提高页面加载速度。

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


@漏刻有时文章来源地址https://www.toymoban.com/news/detail-563048.html

到了这里,关于wangEditor富文本编辑器的调用开发实录2(V5版本自定义粘贴,去除复制word或网页html冗余样式代码的解决方案)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • HTML——实现富文本编辑器wangEditor的使用

    背景:最近在写小说项目,关于发布文章需要用到富文本编辑器,由于还没学到Vue,最实用的还是用wangEditor富文本编辑器。 官方文档:http://www.wangeditor.com/ 使用手册:创建一个编辑器 · wangEditor3使用手册 · 看云 (kancloud.cn) 至于实现的方式有三种: 一.导入wangEditor.JS 使用方法

    2024年02月11日
    浏览(43)
  • VUE2整合富文本编辑器 wangEditor

    2024年02月20日
    浏览(50)
  • vue2+wangEditor5富文本编辑器

    1、安装使用 安装 yarn add @wangeditor/editor # 或者 npm install @wangeditor/editor --save yarn add @wangeditor/editor-for-vue # 或者 npm install @wangeditor/editor-for-vue --save  在main.js中引入样式 import \\\'@wangeditor/editor/dist/css/style.css\\\'   在使用编辑器的页面引入js  import { Editor, Toolbar } from \\\"@wangeditor/editor-fo

    2024年01月22日
    浏览(53)
  • vue3项目使用富文本编辑器-wangeditor

    1.下载依赖 2.插件版本  3.使用 引入css和组件 配置方法 模板(标签)中插入 效果  

    2024年02月09日
    浏览(64)
  • vue使用富文本编辑器 Wangeditor 可显示编辑新增回显禁用

    npm install wangeditor import editorBar from \\\"@/components/ editor/ editor.vue\\\"; Vue.component(\\\'editorBar\\\', editorBar)  editor-bar v-model=\\\"form.nr\\\" :flag=\\\"false\\\" @change=\\\"getcontent\\\" / mothods:{      //获取富文本内容     getcontent (content) {        this.form.nr = content;     }, } editor-bar v-model=\\\"form.nr\\\" :flag=\\\"false\\\" @change=\\\"getc

    2024年02月13日
    浏览(97)
  • Vue3 代码块高亮显示并可使用富文本编辑器编辑(highlight.js + wangEditor)

    在Vue项目中实现以下功能:   功能1. 在页面中显示代码,并将其中的高亮显示。   功能2. 允许对代码块进行编辑,编辑时代码也高亮显示。   功能3. 可在编辑器中添加多个代码块,动态渲染代码高亮。   Step1: 安装所需插件(本文使用npm安装,若需

    2023年04月21日
    浏览(48)
  • vue2+wangEditor5富文本编辑器(图片视频上传)并加锚链接

    官网:https://www.wangeditor.com/v5/installation.html#npm 1、安装使用 安装 在main.js中引入样式 在使用编辑器的页面引入js 模板 js 到这一步编辑完就可以正常显示了 2、上传图片、视频 1)上传到后台接口的可直接按照文档这个配置就行接口返回格式也要可文档上一致 2)自定义上传(一

    2024年02月12日
    浏览(57)
  • vue2+wangEditor5富文本编辑器(图片视频自定义上传七牛云/服务器)

    1、安装使用 安装 在main.js中引入样式 在使用编辑器的页面引入js 模板 js  到这一步编辑器就可以正常显示了 2、上传图片、视频 上传到后台接口的可直接按照文档这个配置就行接口返回格式也要可文档上一致    2)自定义上传(一般上传到别的服务器上,我这边是上传到七

    2024年02月11日
    浏览(70)
  • wangeditor编辑器配置

    vue项目中使用编辑器,轻量,操作栏选取自己需要的 官网地址:用于 Vue React | wangEditor 使用在vue项目中引入   封装成组件使用  

    2024年02月16日
    浏览(33)
  • Vue中使用 WangEditor 编辑器的详细教程

    WangEditor 是一个基于 JavaScript 的富文本编辑器,提供了丰富的编辑功能和灵活的定制能力。以下是 WangEditor 的一些优点: 易于集成和使用 :WangEditor 提供了清晰的 API 和文档,易于集成到各种前端项目中,无论是基于 Vue、React 还是其他框架。 功能丰富 :WangEditor 提供了丰富的

    2024年02月07日
    浏览(50)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包