位置: IT常识 - 正文

vue中使用wangeditor富文本编辑器(vue中使用require报错)

编辑:rootadmin
vue中使用wangeditor富文本编辑器

推荐整理分享vue中使用wangeditor富文本编辑器(vue中使用require报错),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue中使用了哪些设计模式,vue中使用nodejs,vue中使用swiper插件实例,vue中使用require报错,vue中使用require报错,vue中使用video标签视频播放,vue中使用原生js,vue中使用swiper插件实例,内容如对您有帮助,希望把文章链接给更多的朋友!

官方文档 

项目中要求实现富文本编辑器取编辑内容

这种编辑器有好多选择了wangeditor富文本编辑器

首先根据文档安装

yarn add @wangeditor/editor# 或者 npm install @wangeditor/editor --saveyarn add @wangeditor/editor-for-vue@next# 或者 npm install @wangeditor/editor-for-vue@next --save

再按照官方的指引 cv 如下代码

<template> <div style="border: 1px solid #ccc"> <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig" :mode="mode" /> <Editor style="height: 500px; overflow-y: hidden;" v-model="valueHtml" :defaultConfig="editorConfig" :mode="mode" @onCreated="handleCreated" /> </div></template><script>import '@wangeditor/editor/dist/css/style.css' // 引入 cssimport { onBeforeUnmount, ref, shallowRef, onMounted } from 'vue'import { Editor, Toolbar } from '@wangeditor/editor-for-vue'export default { components: { Editor, Toolbar }, setup() { // 编辑器实例,必须用 shallowRef const editorRef = shallowRef() // 内容 HTML const valueHtml = ref('<p>hello</p>') // 模拟 ajax 异步获取内容 onMounted(() => { setTimeout(() => { valueHtml.value = '<p>模拟 Ajax 异步设置内容</p>' }, 1500) }) const toolbarConfig = {} const editorConfig = { placeholder: '请输入内容...' } // 组件销毁时,也及时销毁编辑器 onBeforeUnmount(() => { const editor = editorRef.value if (editor == null) return editor.destroy() }) const handleCreated = (editor) => { editorRef.value = editor // 记录 editor 实例,重要! } return { editorRef, valueHtml, mode: 'default', //默认模式 mode: 'simple', //简洁模式 toolbarConfig, editorConfig, handleCreated }; }}</script>

这个时候编辑器的功能已经实现了 如下图

 但是目前为止他还不是我想要的

因为这个编辑器我想让他在弹窗中出现,而且我不需要那么多功能

接着更文档的步子走

 文档里面既然有这个那就肯定可以实现

研究一番发现弱国想要怎加或者修改编辑器的功能首先要获取这个功能的key

 点击Deom示例

打开控制台,输入toolbar.getConfig().toolbarKeys这个时候就可以看到每个功能的key了

vue中使用wangeditor富文本编辑器(vue中使用require报错)

在回个车

 就可以看到详细内容了

这个时候只需要回到代码里面添加

toolbarConfig.toolbarKeys = [ // 菜单 key 'headerSelect', // 分割线 '|', // 菜单 key 'bold', 'italic', 'color', 'justifyLeft', 'justifyRight', 'justifyCenter' // 继续配置其他菜单... ]

就可以实现你想要的功能了,如下图

 我们可通过toolbarKeys: [], 去实现显示哪些菜单,如何排序、分组的功能   通过excludeKeys: []选择去隐藏哪些菜单

最复杂的就是上传图片了,其实这个也很简单

看看文档

一目了然https://www.wangeditor.com/v5/menu-config.html#%E4%B8%8A%E4%BC%A0%E5%9B%BE%E7%89%87return中写上如下代码,需要注意的时上传图片后,后端必须返回url图片的链接,否则编辑器中不会显示图片

editorConfig: { placeholder: '点击全屏介绍产品吧...', // autoFocus: false, // 所有的菜单配置,都要在 MENU_CONF 属性下 MENU_CONF: { // 配置字号 // fontSize: [... ], // 图片上传 uploadImage: { server: '/api/admin/uploade', fieldName: 'img', // 单个文件的最大体积限制,默认为 2M maximgSize: 10 * 1024 * 1024, // 10M // 最多可上传几个文件,默认为 100 maxNumberOfimgs: 10, // 选择文件时的类型限制,默认为 ['image/*'] 。如不想限制,则设置为 [] allowedimgTypes: ['image/*'], // 自定义上传参数,例如传递验证的 token 等。参数会被添加到 formData 中,一起上传到服务端。 meta: { // token: 'xxx', // otherKey: 'yyy' // img:'' }, // 将 meta 拼接到 url 参数中,默认 false metaWithUrl: false, // 自定义增加 http header headers: { // Accept: 'text/x-json', // otherKey: 'xxx' }, // 跨域是否传递 cookie ,默认为 false withCredentials: true, // 超时时间,默认为 10 秒 timeout: 10 * 1000, //10 秒 // 上传前 onBeforeUpload(imgs) { ElMessage({ message: '图片正在上传中,请耐心等待', grouping: true, duration: 0, customClass: 'uploadTip', iconClass: 'el-icon-loading', showClose: true }); return imgs; }, // 自定义插入图片 customInsert(res, insertFn) { // 因为自定义插入导致onSuccess与onFailed回调函数不起作用,自己手动处理 // 先关闭等待的ElMessage ElMessage.closeAll(); if (res.code === 200) { ElMessage.success({ message: "图片上传成功", grouping: true, }); } else { ElMessage.error({ message: "图片上传失败,请重新尝试", grouping: true, }); } // 从 res 中找到 url alt href ,然后插入图片 insertFn(res.data.url); // console.log(res, "res.data") }, // 单个文件上传成功之后 onSuccess(img, res) { console.log(`${img.name} 上传成功`, res); }, // 单个文件上传失败 onFailed(img, res) { console.log(`${img.name} 上传失败`, res); }, // 上传进度的回调函数 onProgress(progress) { console.log('progress', progress); // progress 是 0-100 的数字 }, // 上传错误,或者触发 timeout 超时 onError(img, err, res) { console.log(`${img.name} 上传出错`, err, res); } },

到这里其实基本功能已经实现了,那我们怎么保存,编辑器中的内容呢

需要知道富文本编辑器是所见即所得的文本编辑器,简单来说就是文本上面写的行内样式,那我们该怎样保存这些行内样式呢,在这里我是写成了组件的形式

官方文档中给出

 methods中写上

onChange(editor) { const text = editor.getHtml() this.$emit('update:content', text)},

当内容变化是就获取当前行内样式

然后在父组件中监听下

watch: { "addlist.content"(value) { // console.log(value, "就是这里") },

在需要的地方

<!-- 编辑器组件 --><editor-all v-model:content="addlist.content" :passSon="addlist.content" /><!-- 编辑器组件结束 -->

就可以实现需要的功能啦

完整代码

<template> <div style="border: 1px solid #ccc; margin-top: 10px;z-index:999;width:537px"> <!-- 工具栏 --> <Toolbar style="border-bottom: 1px solid #ccc" :editor="editor" :defaultConfig="toolbarConfig" /> <!-- 编辑器 --> <Editor style="height:200px; overflow-y: hidden;" :defaultConfig="editorConfig" v-model="passSon" @onChange="onChange" @onCreated="onCreated" /> </div></template><script>import { ElMessage } from 'element-plus'import { Editor, Toolbar } from '@wangeditor/editor-for-vue'export default { props: { passSon: '' }, data() { return { editor: null, toolbarConfig: { /* 显示哪些菜单,如何排序、分组 */ // toolbarKeys: [], /* 隐藏哪些菜单 */ excludeKeys: [ // '|', 'blockquote', 'fontSize', 'fontFamily', 'lineHeight', 'bulletedList', 'numberedList', 'todo', 'emotion', 'group-video', 'group-indent', 'group-more-style', 'insertTable', 'codeBlock',], }, editorConfig: { placeholder: '点击全屏介绍产品吧...', // autoFocus: false, // 所有的菜单配置,都要在 MENU_CONF 属性下 MENU_CONF: { // 配置字号 // fontSize: [... ], // 图片上传 uploadImage: { server: '/api/admin/uploade', fieldName: 'img', // 单个文件的最大体积限制,默认为 2M maximgSize: 10 * 1024 * 1024, // 10M // 最多可上传几个文件,默认为 100 maxNumberOfimgs: 10, // 选择文件时的类型限制,默认为 ['image/*'] 。如不想限制,则设置为 [] allowedimgTypes: ['image/*'], // 自定义上传参数,例如传递验证的 token 等。参数会被添加到 formData 中,一起上传到服务端。 meta: { // token: 'xxx', // otherKey: 'yyy' // img:'' }, // 将 meta 拼接到 url 参数中,默认 false metaWithUrl: false, // 自定义增加 http header headers: { // Accept: 'text/x-json', // otherKey: 'xxx' }, // 跨域是否传递 cookie ,默认为 false withCredentials: true, // 超时时间,默认为 10 秒 timeout: 10 * 1000, //10 秒 // 上传前 onBeforeUpload(imgs) { ElMessage({ message: '图片正在上传中,请耐心等待', grouping: true, duration: 0, customClass: 'uploadTip', iconClass: 'el-icon-loading', showClose: true }); return imgs; }, // 自定义插入图片 customInsert(res, insertFn) { // 因为自定义插入导致onSuccess与onFailed回调函数不起作用,自己手动处理 // 先关闭等待的ElMessage ElMessage.closeAll(); if (res.code === 200) { ElMessage.success({ message: "图片上传成功", grouping: true, }); } else { ElMessage.error({ message: "图片上传失败,请重新尝试", grouping: true, }); } // 从 res 中找到 url alt href ,然后插入图片 insertFn(res.data.url); // console.log(res, "res.data") }, // 单个文件上传成功之后 onSuccess(img, res) { console.log(`${img.name} 上传成功`, res); }, // 单个文件上传失败 onFailed(img, res) { console.log(`${img.name} 上传失败`, res); }, // 上传进度的回调函数 onProgress(progress) { console.log('progress', progress); // progress 是 0-100 的数字 }, // 上传错误,或者触发 timeout 超时 onError(img, err, res) { console.log(`${img.name} 上传出错`, err, res); } }, } }, } }, mounted() { }, methods: { onCreated(editor) { this.editor = Object.seal(editor) // 【注意】一定要用 Object.seal() 否则会报错 }, onChange(editor) { const text = editor.getHtml() this.$emit('update:content', text) }, }, beforeDestroy() { const editor = this.editor if (editor == null) return editor.destroy() // 组件销毁时,及时销毁 editor ,重要!!! }, components: { Editor, Toolbar },}</script><style src="@wangeditor/editor/dist/css/style.css"></style>

ok

本文链接地址:https://www.jiuchutong.com/zhishi/295969.html 转载请保留说明!

上一篇:【小程序】新版uniapp登录流程以及获取头像和昵称(小程序新版本)

下一篇:Pytorch复习笔记--导出Onnx模型为动态输入和静态输入(pytorch基础教程)

  • 怎样玩转免费网页游戏(如何用免费网络)

    怎样玩转免费网页游戏(如何用免费网络)

  • 学习通考试可以分屏吗

    学习通考试可以分屏吗

  • 快手邀请新用户怎么邀请(快手邀请新用户怎么才算邀请成功)

    快手邀请新用户怎么邀请(快手邀请新用户怎么才算邀请成功)

  • wps怎么把两页互换位置(wps怎么把两页互换页面)

    wps怎么把两页互换位置(wps怎么把两页互换页面)

  • 酷狗概念版什么区别(酷狗概念版什么时候出来的)

    酷狗概念版什么区别(酷狗概念版什么时候出来的)

  • 华为nova6关机键在什么地方(华为nova6关机键失灵怎么关机)

    华为nova6关机键在什么地方(华为nova6关机键失灵怎么关机)

  • 中转站剩余容量不足(中转站剩余空间不足怎么办)

    中转站剩余容量不足(中转站剩余空间不足怎么办)

  • 苹果账号老是被锁定(苹果账号老是被退出)

    苹果账号老是被锁定(苹果账号老是被退出)

  • 微信被搜账号异常 无法显示是什么意思(微信被搜账号异常是什么原因)

    微信被搜账号异常 无法显示是什么意思(微信被搜账号异常是什么原因)

  • 数字电视将什么信号转化为什么信号(数字电视什么牌子好)

    数字电视将什么信号转化为什么信号(数字电视什么牌子好)

  • C盘中esupport是什么文件夹(c盘esupport文件可以删除吗)

    C盘中esupport是什么文件夹(c盘esupport文件可以删除吗)

  • 手机红外遥控是什么(手机红外遥控是什么功能)

    手机红外遥控是什么(手机红外遥控是什么功能)

  • win12什么时候发布的(windows什么时候发布)

    win12什么时候发布的(windows什么时候发布)

  • 苹果x感光怎么关闭(苹果x感光在哪)

    苹果x感光怎么关闭(苹果x感光在哪)

  • e5200cpu相当于i几(e5200cpu参数)

    e5200cpu相当于i几(e5200cpu参数)

  • 提示正在通话中是怎么回事(正在通话中...)

    提示正在通话中是怎么回事(正在通话中...)

  • 怎样设置闹钟时间(怎样设置闹钟时间手机)

    怎样设置闹钟时间(怎样设置闹钟时间手机)

  • 卡贴机能开热点吗(苹果卡贴机怎么开热点)

    卡贴机能开热点吗(苹果卡贴机怎么开热点)

  • 12g和8g运行的差距(12g运行和8g运行)

    12g和8g运行的差距(12g运行和8g运行)

  • 网卡驱动删除怎么恢复(网卡驱动删除了怎么弄)

    网卡驱动删除怎么恢复(网卡驱动删除了怎么弄)

  • 手机没卡可以上微信吗(手机没卡可以上抖音吗)

    手机没卡可以上微信吗(手机没卡可以上抖音吗)

  • 华为a03l是什么型号(华为a乚00是什么型号)

    华为a03l是什么型号(华为a乚00是什么型号)

  • pr视频渲染是什么意思(pr渲染啥意思)

    pr视频渲染是什么意思(pr渲染啥意思)

  • 微信发出去消息怎么撤回(微信发出去消息超过两分钟怎么撤回)

    微信发出去消息怎么撤回(微信发出去消息超过两分钟怎么撤回)

  • 华为应用市场被禁止安装软件怎么样才可以取消详情(华为应用市场被锁了,怎么解除密码)

    华为应用市场被禁止安装软件怎么样才可以取消详情(华为应用市场被锁了,怎么解除密码)

  • Vue3+TypeScript+Vite如何使用require动态引入类似于图片等静态资源

    Vue3+TypeScript+Vite如何使用require动态引入类似于图片等静态资源

  • 个税申报按权责发生制行吗?
  • etc扣费与发票不符
  • 2019年所得税季度增值税怎么报
  • 小规模没有成本票企业所得税怎么办呀
  • 加工费的计提工资账务处理
  • 固定资产减值必有损益吗
  • 盈余公积属于什么类账户
  • 进项已经抵扣会退回吗
  • 年报中纳税总额怎么填
  • 融资租赁开始日最低租赁付款额
  • 支付给职工和为职工支付的现金
  • 公司出差员工有权拒绝吗
  • 增值税专用发票电子版
  • 工会筹备金怎么改成工会经费
  • 房产税计税依据房产原值怎么算
  • 异地预缴本地申报流程
  • 行政单位库存物资管理办法
  • 公司没有进出口权 如何进行业务
  • 固定资产清理税金如何处理
  • 未开票收入纳税
  • 地方教育附加可以在企业所得税前扣除吗
  • 工程前期咨询收费标准
  • 有限责任公司的人员构成
  • php获取长度
  • 支付的测试报告怎么查
  • 在win10系统中复制的文件不能粘贴怎么办?
  • 供热企业供热费收入的核算
  • 公司培训赔偿
  • php 链式调用
  • 劳务费支出计入什么科目?
  • 抖音小程序任务哪里接
  • php如何调用function
  • siri怎么重置主人声音ios13
  • reactvate
  • 长期待摊费用装修费摊销年限
  • 营业税借方表示什么
  • 小规模企业应交税费
  • 分配现金股利的分录
  • p f和p a的区别
  • 对公给个人转账有风险吗
  • 非流动资产基金属于什么科目
  • 贴现手续费计入哪个明细科目
  • python id 函数
  • mongodb 安装
  • 印花税如何记账入账
  • 受雇于两家公司补税怎么算
  • access字符型数据
  • sql server 2005安装失败
  • mysql错误代码1067
  • 申报企业所得税会计分录怎么写
  • 免征水利建设基金条件
  • 股票分红是怎么扣税的
  • 合伙企业对外投资需要全体合伙人同意吗
  • 超市出租摊位交什么税
  • 材料合理损耗计入入账价值吗
  • 公司员工入职的心得体会
  • 地方水利建设基金减免政策2023
  • 工程类的增值税
  • 公司注销资本公积
  • 购入固定资产的增值税计入成本吗
  • 工会经费按照什么计算缴纳
  • mysql5.5.62安装配置教程
  • mysql5.5解压版安装教程
  • win键有啥用
  • 笔记本win7win10双系统怎么装
  • linux操作系统的安装
  • mplugin.exe是什么
  • windows 10 mobile--移动版
  • win102021更新
  • node.js编译
  • Android游戏开发案例教程小小弹球
  • jquery制作下拉菜单
  • linux命令行怎么用
  • 《JavaScript高级程序设计》pdf链接
  • 农产品核定扣除办法38号公告
  • 地税客服电话
  • 济南高新区地税局地址
  • 河北公示信息网
  • 国家税务总局关于新型墙体材料增值税政策的通知
  • 云南 过年
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设