vue-cli引入wangEditor、Element,封装可上传附件的富文本编辑器组件(附源代码直接应用,菜单可调整)

news/2024/3/28 21:50:44/文章来源:https://blog.csdn.net/weixin_43642751/article/details/129204121

关于Element安装引入,请参考我的另一篇文章:vue-cli引入Element Plus(element-ui),修改主题变量,定义全局样式_shawxlee的博客-CSDN博客_chalk variables


1、安装wangeditor

npm i wangeditor --save

wangEditor官方文档:Introduction · wangEditor 用户文档

2、在页面中引入wangeditor创建编辑器

附上自己封装的富文本编辑器组件源代码,可上传图片和附件:

<template><!-- 富文本编辑器 --><div class="rich_editor"><div :id="id" style="margin-bottom: 10px"><slot></slot></div><!-- 上传附件 --><el-upload ref="upload" action="#" multiple :on-remove="onRemove" :on-change="onChange" :auto-upload="false" :file-list="fileList"><template #trigger><el-button type="text" icon="el-icon-circle-plus" style="line-height: normal;">添加附件</el-button></template><!-- 操作按钮 --><span style="float:right;"><el-button type="primary" size="small" @click="submit" :disabled="(!editorInput.content && fileList.length == 0) || loading"><i class="el-icon-loading" v-show="loading"></i> 提交</el-button><el-button size="small" @click="cancel">取消</el-button></span><!-- 提示文本 --><template #tip><div class="el-upload__tip info" v-if="tip">* {{ tip }}</div></template></el-upload></div>
</template>
<script>
import E from 'wangeditor' //引入wangeditor
export default {props: {id: String, //组件唯一IDfiles: Array, //已上传的文件列表(非必填)loading: Boolean, //缓冲条件(非必填)tip: String, //提示文本(非必填)size: Number, //文件大小限制(字节)(非必填)},data() {return {editorInput: { //编辑器内容content: '',files: []},fileList: this.files ? this.files : [] //文件列表}},mounted() {//初始化编辑器var editor = new E('#' + this.id)//配置属性editor.config.height = 100editor.config.menus = ['bold','underline','link','image',]editor.config.showFullScreen = falseeditor.config.placeholder = '请输入内容或上传附件……'editor.config.pasteIgnoreImg = trueeditor.config.uploadImgShowBase64 = true//实时监听输入内容editor.config.onchange = (newHtml) => {this.editorInput.content = newHtml}//创建编辑器editor.create()},methods: {//文件列表移除文件时的钩子onRemove(file, fileList) {this.fileList = fileList},//文件状态改变时的钩子,添加文件、上传成功和上传失败时都会被调用onChange(file, fileList) {if (this.size && (file.size > this.size)) { //处理文件大小限制this.$message.error(this.tip)this.fileList = fileList.slice(0, -1)} else {this.fileList = fileList}},//提交编辑内容submit() {var formData = new FormData() //根据后端接口参数的格式要求进行处理if (this.fileList.length > 0) { //处理上传的文件for (let i = 0, len = this.fileList.length; i < len; i++) {if (this.fileList[i].raw) {formData.append('file', this.fileList[i].raw)}if (this.files && this.files.length > 0) {for (let j = 0, lenj = this.files.length; j < lenj; j++) {if (this.fileList[i].uid == this.files[j].uid) {this.editorInput.files.push(this.fileList[i].uid)}}}}}this.$emit('submit', this.editorInput, formData) //@submit调用父组件函数完成提交,参数:(editorInput, formData)},//取消编辑cancel() {this.$emit('cancel') //@cancel调用父组件函数取消编辑},}
}
</script>
<style lang="scss">
.w-e-toolbar {z-index: 100 !important;
}.w-e-text-container {z-index: 99 !important;
}.w-e-text {padding: 6px 10px;
}.w-e-text-container .placeholder {font-size: 12px;line-height: normal;
}.w-e-toolbar p,
.w-e-text-container p,
.w-e-menu-panel p {font-size: 12px !important;line-height: normal !important;
}.el-upload__tip {margin-top: 0;font-size: 10px;margin-bottom: 10px;line-height: normal;
}.el-upload-list__item {font-size: 12px;line-height: normal;color: $label;width: calc(100% - 100px);
}
</style>

组件应用示例:

<OrderEditor id="unique_id" :files="files" :loading="loading" tip="文件大小不超过 200 MB" :size="209715200" @submit="handleSubmit" @cancel="handleCancel"><!-- slot文本框初始填充的内容 -->
</OrderEditor>// id - String, 唯一ID
// files - Array, 已上传的文件列表(非必填)
// loading - Boolean, 缓冲条件(非必填)
// tip - String, 提示文本(非必填)
// size - Number, 文件大小限制(字节)(非必填)
// submit - Function, 提交内容调用函数,参数:(editorInput, formData)
// cancel - Function, 取消编辑调用函数

组件效果展示:
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_73659.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【OpenFOAM】-olaFlow-算例10-wavemakerTank

算例路径&#xff1a; olaFlow\tutorials\wavemakerTank 算例描述&#xff1a; 采用 Flap和Piston两种方式的动网格进行造波 学习目标&#xff1a; 了解 olaDyMFlow 的使用&#xff1b;理解动网格使用和参数设置&#xff0c;理解 dynamicMotionSolverFvMesh 参数设置&#xff1…

【华为OD机试模拟题】用 C++ 实现 - 环中最长子串(2023.Q1)

最近更新的博客 华为OD机试 - 入栈出栈(C++) | 附带编码思路 【2023】 华为OD机试 - 箱子之形摆放(C++) | 附带编码思路 【2023】 华为OD机试 - 简易内存池 2(C++) | 附带编码思路 【2023】 华为OD机试 - 第 N 个排列(C++) | 附带编码思路 【2023】 华为OD机试 - 考古…

【Linux修炼】14.磁盘结构/文件系统/软硬链接/动静态库

每一个不曾起舞的日子&#xff0c;都是对生命的辜负。 磁盘结构/文件系统/软硬链接/动静态库前言一.磁盘结构1.1 磁盘的物理结构1.2 磁盘的存储结构1.3 磁盘的逻辑结构二.理解文件系统2.1 对IO单位的优化2.2 磁盘分区与分组2.3 分组的管理方法2.4 文件操作三.软硬链接3.1理解硬…

vue手写日历

<template><div class"page">输入月份数字<input v-model"inputVal" type"text"><button click"change">点击</button><ul class"calendar"><li class"header">{{new …

记忆总掉线?这些行为太伤脑!

人体老化过程中&#xff0c;记忆力的衰退不可避免&#xff0c;这种属于“良性”的记忆衰退。但非“良性”的记忆衰退可要重视&#xff0c;很可能是痴呆症的早期征兆。由于各种原因&#xff0c;我们各种熬夜。作息的不规律扰乱大脑神经系统的调节。这种长期慢性损害大脑&#xf…

WebDAV之π-Disk派盘+Cloud Player

Cloud Player 支持WebDAV方式连接π-Disk派盘。 推荐一款云媒体播放器是存储在常见云平台中的内容的通用播放器。 Cloud Player云媒体播放器是存储在常见云平台中的内容的通用播放器,无需将其下载到设备。支持以下云平台:Google Drive、DropBox、One Drive、WebDav等。此外,…

超纯水制备,MB-106UP抛光树脂的技术解析

超纯水&#xff08;Ultrapure water&#xff09;又称UP水&#xff0c;是指电阻率达到18 MΩ*cm&#xff08;25℃&#xff09;的水。这种水中除了水分子外&#xff0c;几乎没有什么杂质&#xff0c;更没有细菌、病毒、含氯二噁英等有机物&#xff0c;当然也没有人体所需的矿物质…

【ArcGIS Pro二次开发】(7):地图(Map)的基本操作

地图是ArcGIS Pro中的基础起点&#xff0c;也是大多数工程的基础。主要用于显示表示空间数据的图层。 一、地图(Map)的基本操作示例 1、获取当前地图 var map MapView.Active.Map; 2、获取一级图层 var lys map.Layers; 用于获取地图中的单一图层&#xff0c;以及图层组…

深入了解Java线程锁(一)

在上一篇《如何保证线程的原子性》中&#xff0c;我们谈到了锁&#xff08;Synchronized&#xff09;&#xff0c; 这次我们就来深入探讨一下Java多线程中的锁。 互斥锁的本质是共享资源。 如上图所示&#xff0c; Thread1访问受保护资源&#xff0c;对其加锁&#xff0c;将…

【GO】k8s 管理系统项目16[前端部分–前端布局]

【GO】k8s 管理系统项目[前端部分–前端布局] 1. 前端布局 2. Layout 2.1 layout src/layout/Layout.vue <template><div class"common-layout"><el-container><el-side width"200">Aside</el-side><el-container>…

CAN总线开发一本全(3) - 微控制器集成的FlexCAN外设

CAN总线开发一本全&#xff08;3&#xff09; - 微控制器集成的FlexCAN外设 苏勇&#xff0c;2023年2月 文章目录CAN总线开发一本全&#xff08;3&#xff09; - 微控制器集成的FlexCAN外设引言硬件外设模块系统概要总线接口单元 - 寄存器清单数据结构 - 消息缓冲区MB初始化过…

React(一):初识React、类组件、jsx的基础语法

React&#xff08;一&#xff09;一、初识React1.简单介绍2.React的三个依赖3.Hello React案例二、类组件1.定义类组件并渲染2.绑定事件函数&#xff08;奇怪的this问题&#xff09;3.数组形式数据的展示&#xff08;电影案例&#xff09;4.计数器案例三、jsx语法详解1.jsx的书…

利用InceptionV3实现图像分类

最近在做一个机审的项目&#xff0c;初步希望实现图像的四分类&#xff0c;即&#xff1a;正常&#xff08;neutral&#xff09;、涉政&#xff08;political&#xff09;、涉黄&#xff08;porn&#xff09;、涉恐&#xff08;terrorism&#xff09;。有朋友给推荐了个github上…

机器学习笔记之近似推断(一)从深度学习角度认识推断

机器学习笔记之近似推断——从深度学习角度认识推断引言推断——基本介绍精确推断难的原因虽然能够表示&#xff0c;但计算代价太大无法直接表示引言 本节是一篇关于推断总结的博客&#xff0c;侧重点在于深度学习模型中的推断任务。 推断——基本介绍 推断(Inference\text{…

Python中实现将内容进行base64编码与解码

一、需求说明需要使用Python实现将内容转为base64编码&#xff0c;解码&#xff0c;方便后续的数据操作。二、base64简介Base64是一种二进制到文本的编码方式【是一种基于 64 个可打印字符来表示二进制数据的表示方法&#xff08;由于 2^664&#xff0c;所以每 6 个比特为一个单…

国产音质好的蓝牙耳机有哪些?国产音质最好的耳机排行

随着时间的推移&#xff0c;真无线蓝牙耳机逐渐占据耳机市场的份额&#xff0c;成为人们日常生活中必备的数码产品之一。蓝牙耳机品牌也多得数不胜数&#xff0c;哪些国产蓝牙耳机音质好&#xff1f;下面&#xff0c;我们从音质出来&#xff0c;来给大家介绍几款国产蓝牙耳机&a…

硬件系统工程师宝典(11)-----去耦电容布局“有讲究”

各位同学大家好&#xff0c;欢迎继续做客电子工程学习圈&#xff0c;今天我们继续来讲这本书&#xff0c;硬件系统工程师宝典。 上篇我们说到在电源完整性分析的目标就是要做到电源的干净、稳定和快速响应&#xff0c;以及针对不同噪声处理的实现方法。今天我们来看看去耦电容…

父传子与子传父步骤

父传子&#xff1a; 问题&#xff1a;父页面中引入子组件 把想要传给子页面的值用在子组件中用 &#xff1a;值“值” (用同一个值好区分)来绑定。 在子页面中用props接收 子组件不能改变父组件传过来的值。&#xff08;传多个页面的时候是&#xff0c;比如父传孙的时候我会…

【2023】华为OD机试真题Java-题目0221-AI处理器组合

AI处理器组合 题目描述 某公司研发了一款高性能AI处理器。每台物理设备具备8颗AI处理器,编号分别为0、1、2、3、4、5、6、7。编号0-3的处理器处于同一个链路中,编号4-7的处理器处于另外一个链路中,不通链路中的处理器不能通信,如下图所示。现给定服务器可用的处理器编号数…

STM32---备份寄存器BKP和 FLASH学习使用

BKP库函数 学习BKP&#xff0c;首先就是知道BKP每一个函数的作用然后如何使用即可 使用备份域的作用只需要操作上面的两个函数即可&#xff0c;其余的都是它的其他功能 BKP简介 备份寄存器是42个16位的寄存器&#xff0c;可用来存储84个字节的用户应用程序数据。他们处在备份…