位置: 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基础教程)

  • 房地产企业递延所得税资产计算方法
  • 当期所得税是否是当期缴纳的所得税
  • 公司取得违约金合法吗
  • 增值税税控系统技术维护费怎么做账
  • 押金收不回来没钱怎么办
  • 交了进口增值税还要交增值税吗
  • 非货币性资产交换补价大于25%的会计处理
  • 已入账未抵扣退回发票
  • 预付装修费的会计分录
  • 商业汇票的申请人是谁
  • 土地使用税的免税规定有哪些
  • 经济纠纷引发的刑事案件
  • 资质招投标
  • 安装过程中材料和工资
  • 进出口企业如何防范汇率风险
  • 增值税发票收款人复核人空白可以吗
  • 营改增后建筑企业财务核算
  • 什么情形下可以认定为重婚
  • 醋开票属于什么类
  • 如何查找使用过的手机号
  • 减少注册资本金程序
  • 亏损企业所得税汇算清缴怎么做
  • 企业收到要发放给员工的补贴
  • 日工资计算的三种方法
  • 付款网站制作
  • 科研费收入如何入账?
  • 去年的管理费用怎么冲
  • windows10无法打开图片
  • win10无法设置pin码怎么办
  • u盘的重装系统
  • 处置固定资产简易计税怎么申报
  • 职工福利费的计提标准
  • php基础语法
  • 至极加速
  • 消防器材怎么做?
  • 如何失业保险金
  • 下脚料属于什么科目
  • 子公司使用母公司授信
  • 可抵免境外所得税税额
  • vue+
  • 解决脱发的8个方法
  • jquery 批量删除
  • php反射获取方法参数
  • yolov5 教程
  • js去掉数组中的空字符串
  • 财务费用的增加记在哪一方
  • 公司与公司往来账表格怎么制作
  • 财政拨款事业单位的办公用车免征车船税吗
  • 利润表调整了资产负债表怎么调整
  • 用友t6操作流程
  • 个人向公司借款怎么写
  • 已认证发票作废是购买方申请吗
  • 直接减免增值税的情形
  • 公司对公账户没钱了辞退员工
  • 收付转三种凭证的限制类型
  • 盈余公积的会计处理
  • 项目期间费用包括哪些费用
  • win2008远程桌面闪退
  • Fedora 9.0 Apache+PHP+MYSQL 环境安装
  • vc软件是什么软件
  • windowsxp停止服务的时间
  • win7诊断策略服务未运行是电脑问题还是网络
  • linux jre
  • macbook怎么把通知关掉
  • win8.1进不了系统
  • Win10开机提示黑屏字母
  • windows 8.1安装教程
  • linuxone
  • cocos creator 发布web
  • react组件写法
  • opengl入门视频教程
  • android的
  • 安卓的引导式访问叫什么
  • shell 字符串trim
  • unity c+
  • js间隔执行的代码
  • jquery获取点击元素的id
  • javascript 数组删除
  • 河南省个人无犯罪证明书
  • 煤矸石占地需要哪些手续
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设