前端vue-实现富文本组件
1.使用wangeditor富文本编辑器
工具网站:https://www.wangeditor.com/v4/
下载安装命令:npm i wangeditor --save
成品如下图:

组件实现代码
<template><div><!-- 富文本编辑器 --><div id="wangeditor"></div></div>
</template>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>import { uploadImage } from '@/api/api'; // 导入图片上传api
import E from 'wangeditor';export default {name: 'richText',components: {},props: {defaultDetails: {default: '请填写内容',type: String,},},watch: {htmlContent(val) {this.$emit('change', val); // 将改变同步到父组件if (this.validateEvent) {this.dispatch('ElFormItem', 'el.form.change', [val]);}}},data() {return {editor: null,htmlContent: '<p>hello</p>',firtherMethod: 'loadingCompleted', // 回调父组件,通知editor已经创建完成};},methods: {// 获取text文本getText() {const text = this.editor.txt.text();console.log('text = ', text);return text;},// 获取htmlgetHtml() {const html = this.editor.txt.html();console.log('thml = ', html);return html;},// 图片上传自定义实现async uploadImage(files) {const file = files[0];console.log('Fuedit2-uploadImage file = ', file);const res = await uploadImage(obj);const path = SOCKET + (res.path || {});console.log('完整path = ', path);return path;},// 设置内容setHtml(html) {this.editor.txt.html(html);// 重新设置编辑器内容},// 追加内容appentHtml(html) {this.editor.txt.append(html);// 继续追加内容。},// 销毁编辑器beforeDestroy() {// 销毁编辑器console.log('销毁前');this.editor.destroy()console.log('销毁后');this.editor = null},// 清空编辑器内容clearText() {this.editor.txt.clear();},createEditor() {if(this.editor !== null) {return;}this.editor = new E('#wangeditor');// 或者 const editor = new E( document.getElementById('div1') )this.editor.config.height = 200; // 设置高度// 内容发生改变时回调// this.editor.config.onchange = function (html) {// this.htmlContent = html;// }this.editor.config.placeholder = this.defaultDetails; // 自定义初始文字提示this.editor.config.focus = false;// 取消初始化时自动聚焦this.editor.config.menus = [ // 定义显示哪些菜单和菜单的顺序。'head', // 标题'bold', // 粗体'fontSize', // 字号'fontName', // 字体'italic', // 斜体'underline', // 下划线// 'strikeThrough', // 删除线// 'indent','lineHeight','foreColor', // 文字颜色'backColor', // 背景颜色'link', // 插入链接'list', // 列表// 'todo',// 'justify', // 对齐方式// 'quote', // 引用// 'emoticon', // 表情'image', // 插入图片// 'table', // 表格// 'video', // 插入视频// 'code', // 插入代码'splitLine','undo', // 撤销'redo', // 重复];// this.editor.config.uploadImgServer = '/upload-img'; // 配置上传server 接口地址this.editor.config.uploadImgMaxSize = 2 * 1024 * 1024; // 图片上传maxthis.editor.config.uploadImgAccept = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp']; // 图片上传类型this.editor.config.uploadImgMaxLength = 1; // 一次最多上传 1 个图片this.editor.config.customUploadImg = async function (resultFiles, insertImgFn) { // 自定义图片上传实现// resultFiles 是 input 中选中的文件列表;insertImgFn 是获取图片 url 后,插入到编辑器的方法const file = resultFiles[0];const path = await uploadImage(file);//返回图片地址console.log('完整path = ', path);// 上传图片,返回结果,将图片插入到编辑器中insertImgFn(path);}// 使用base64格式保存本地图片,不可与uploadImgServer同时使用// this.editor.config.uploadImgShowBase64 = true;this.editor.create();// this.editor.txt.html('<p>用 JS 设置的内容</p>');// 重新设置编辑器内容// 第一步,初始化 textarea 的值// text1.val(this.editor.txt.html())console.log('this.editor = ', this.editor);// this.editor.txt.append('<p>追加的内容</p>');// 继续追加内容。// 创建完成,回调父组件try {this.$emit(this.firtherMethod, null);} catch (error) {console.log('editor 完成,回调父组件失败 error = ', error);}},},mounted() {this.createEditor();},
};
</script><style lang="css" src="">
/* @import '../css/Cnel.css';/* 使用style属性src引入外部css,仅在当前s组件有效 */
</style>
组件使用方式
RichText: () => import('@/components/RichText.vue'),<rich-text v-model="details" ref="fueditModule" @loadingCompleted="loadingCompleted"></rich-text>export default Vue.extend({name: 'UpdateText',components: {RichText: () => import('@/components/RichText.vue'),},methods: {// 富文本组件加载完成回调loadingCompleted() {try {console.log('editor加载完成,回调父组件');// this.details = this.$refs.fueditModule.setHtml('<p><b>招商会详情!!</b></p>');} catch (error) {console.log('打开弹窗 err =', error);}},// 调用子组件获取富文本内容this.details = this.$refs.fueditModule.getHtml();// 调用子组件设置富文本内容this.$refs.fueditModule.setHtml('<p><b>设置详情!!</b></p>');// 调用子组件销毁富文本编辑框this.$refs.fueditModule.beforeDestroy();}
})
相关文章:
前端vue-实现富文本组件
1.使用wangeditor富文本编辑器 工具网站:https://www.wangeditor.com/v4/ 下载安装命令:npm i wangeditor --save 成品如下图: 组件实现代码 <template><div><!-- 富文本编辑器 --><div id"wangeditor">…...
AUTOSAR汽车电子嵌入式编程精讲300篇-基于CAN总线的气动控制(中)
目录 2.2 CAN总线技术及TTCAN协议 2.2.1 CAN总线技术 2.2.2 TTCAN协议 3 气动系统的定位控制研究 3.1 滑模控制原理 3.1.1 滑模控制概念和特性 3.1.2 滑模控制的抖振问题 3.1.3 非奇异终端滑模控制 3.2 气动系统定位控制策略设计 3.2.1 跟踪微分器的设计…...
国内可用ChatGPT-4中文镜像网站整理汇总【持续更新】
一、GPT中文镜像网站 ① yixiaai.com 支持GPT4、4o以及o1,支持MJ绘画 ② chat.lify.vip 支持通用全模型,支持文件读取、插件、绘画、AIPPT ③ AI Chat 支持GPT3.5/4,4o以及MJ绘画 二、模型知识 o1/o1-mini:最新的版本模型&am…...
前端sm2国密加密时注意
如下方法: export function encrypt(str) {const sm2 require("sm-crypto").sm2;const cipherMode 1; // 1 - C1C3C2,0 - C1C2C3,默认为1//自定义密钥let publicKey "xxxxxxxx";//此处加密let a sm2.doEncrypt(str,…...
LeetCode 面试经典150题 9.回文数
题目: 给你一个整数 x ,如果 x 是一个回文整数,返回 true ;否则,返回 false 。 回文数:是指正序(从左向右)和倒序(从右向左)读都是一样的整数。 例如&…...
select 函数简介
原型 #include <sys/select.h> #include <sys/time.h> #include <unistd.h> int select(int n, fd_set *readfds, fd_set *writefds, fd_set *exceptfds, struct timeval *timeout); 作用 select 函数是 UNIX 和类 UNIX 系统(如 Linux&am…...
python - 在linux上编译py文件为【.so】文件部署项目运行
python - 在linux上编译py文件为【.so】文件,可通过主文件直接执行 一. 前言 在Python中,通常不直接将Python代码编译为.so(共享对象)文件来执行,因为.so文件是编译后的二进制代码,通常用于C或C等语言&am…...
SQL_having_pandas_filter
HAVING子句在SQL中用于对分组后的结果进行过滤,它通常与GROUP BY子句一起使用。HAVING子句允许你指定条件来过滤聚合函数的结果,而WHERE子句则用于在分组之前过滤原始数据。 基本语法 SELECT column_name, aggregate_function(column_name) FROM table…...
从软件架构设计角度理解Kafka
网上对于消息中间件的介绍文章比较多,这里我们不再赘述,我们换个思路来理解消息中间件,从软件开发架构的角度来看下消息中间件是如何诞生和演进的。 一、概述 上图中P代表 Provider,C代表Consumer,下同。P和C是一个典型…...
什么是中断?
1.什么是中断 2.中断的重要性 3.中断的上下半部 4.中断处理流程 中断的原则 5.ARM处理器程序运行过程 6.程序被被中断时,怎么保护现场 1.什么是中断 中断是指在 CPU 正常运行期间, 由外部或内部事件引起的一种机制。 当中断发生时,…...
后端(实例)08
设计一个前端在数据库调取数据的表格,并完成基础点击增删改查的功能: 1.首先写一个前端样式(空壳) <!DOCTYPE html> <html> <head> <meta charset"UTF-8"> <title>Insert title here&l…...
【stm32】TIM定时器输出比较-PWM驱动LED呼吸灯/舵机/直流电机
TIM定时器输出比较 一、输出比较简介1、OC(Output Compare)输出比较2、PWM简介3、输出比较通道(高级)4、输出比较通道(通用)5、输出比较模式6、PWM基本结构配置步骤:程序代码:PWM驱动LED呼吸灯 7、参数计算8、舵机简介程序代码&am…...
如何使用ssm实现线上旅游体验系统+vue
TOC ssm691线上旅游体验系统vue 绪论 课题背景 身处网络时代,随着网络系统体系发展的不断成熟和完善,人们的生活也随之发生了很大的变化。目前,人们在追求较高物质生活的同时,也在想着如何使自身的精神内涵得到提升࿰…...
探索JMeterTools:一个Python驱动的JMeter脚本生成器
JMeterTools 简介 JMeterTools 是一个由 Python 编写的开源项目,旨在帮助测试人员快速生成 JMeter 测试脚本。通过简单的 Python API,用户可以方便地定义测试计划、线程组、HTTP 请求等,可以结合接口自动化测试项目,将接口自动化…...
【React】组件通信
1. 组件通信 组件间的数据传递 1.1 父传子 步骤: 父组件传递数据——在子组件标签上绑定属性子组件接收数据——子组件通过props参数接收数据 function Son(props) {return <div>{props.value}</div> }function App() {const value 父组件传给子…...
C++核心编程和桌面应用开发 第七天(运算符重载 智能指针)
目录 1.数组类 2.运算符重载 2.1加号运算符 2.1.1成员函数实现 2.1.2全局函数实现 2.1.3加号重载 2.2左移运算符 2.3递增运算符 2.4指针运算符 2.5赋值运算符 1.数组类 //默认构造函数 MyArray::MyArray() {m_Size 0;m_Capacity 100;pAddress new int[m_Capacity]…...
echarts地图的简单使用
echarts地图的简单使用 文章说明核心源码效果展示源码下载 文章说明 主要介绍echarts地图组件的简单使用,记录为文章,供后续查阅使用 目前只是简单的示例,然后还存在着一些小bug,主要是首个Legend的点击会导致颜色全部不展示的问题…...
Qt 项目优化实践方向
目录 1. 使用智能指针2. 避免在全局或静态作用域中使用裸指针3. 利用Qt的对象树进行资源管理4. 延迟加载和按需加载资源5. 合理使用Qt的资源文件(qrc)6. 监控和调试内存使用7. 优化数据结构8. 减少不必要的资源复制9. 使用缓存机制10. 遵循RAII原则 以下…...
常见的15个:自然语言处理(NLP)实战项目
自然语言处理(NLP)实战项目涵盖了从基础到高级的多个领域,以下是一些常见的NLP实战项目,每个项目都附带了简要的描述和可能用到的技术栈: 1. 文本分类(Text Classification) 描述: 将文本数据…...
CKKS同态加密通用函数近似方法和openFHE实现
摘要 同态加密可以直接在密文上进行运算,尤其是CKKS,可以直接在实数的密文上进行运算。服务器可以利用强大的计算能力,在不泄露用户隐私的情况下,为用户提供便捷的外包运算服务。然而,CKKS只能进行算术运算࿰…...
uniapp 对接腾讯云IM群组成员管理(增删改查)
UniApp 实战:腾讯云IM群组成员管理(增删改查) 一、前言 在社交类App开发中,群组成员管理是核心功能之一。本文将基于UniApp框架,结合腾讯云IM SDK,详细讲解如何实现群组成员的增删改查全流程。 权限校验…...
MySQL 隔离级别:脏读、幻读及不可重复读的原理与示例
一、MySQL 隔离级别 MySQL 提供了四种隔离级别,用于控制事务之间的并发访问以及数据的可见性,不同隔离级别对脏读、幻读、不可重复读这几种并发数据问题有着不同的处理方式,具体如下: 隔离级别脏读不可重复读幻读性能特点及锁机制读未提交(READ UNCOMMITTED)允许出现允许…...
基于Flask实现的医疗保险欺诈识别监测模型
基于Flask实现的医疗保险欺诈识别监测模型 项目截图 项目简介 社会医疗保险是国家通过立法形式强制实施,由雇主和个人按一定比例缴纳保险费,建立社会医疗保险基金,支付雇员医疗费用的一种医疗保险制度, 它是促进社会文明和进步的…...
C# 求圆面积的程序(Program to find area of a circle)
给定半径r,求圆的面积。圆的面积应精确到小数点后5位。 例子: 输入:r 5 输出:78.53982 解释:由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982,因为我们只保留小数点后 5 位数字。 输…...
4. TypeScript 类型推断与类型组合
一、类型推断 (一) 什么是类型推断 TypeScript 的类型推断会根据变量、函数返回值、对象和数组的赋值和使用方式,自动确定它们的类型。 这一特性减少了显式类型注解的需要,在保持类型安全的同时简化了代码。通过分析上下文和初始值,TypeSc…...
NPOI操作EXCEL文件 ——CAD C# 二次开发
缺点:dll.版本容易加载错误。CAD加载插件时,没有加载所有类库。插件运行过程中用到某个类库,会从CAD的安装目录找,找不到就报错了。 【方案2】让CAD在加载过程中把类库加载到内存 【方案3】是发现缺少了哪个库,就用插件程序加载进…...
【Elasticsearch】Elasticsearch 在大数据生态圈的地位 实践经验
Elasticsearch 在大数据生态圈的地位 & 实践经验 1.Elasticsearch 的优势1.1 Elasticsearch 解决的核心问题1.1.1 传统方案的短板1.1.2 Elasticsearch 的解决方案 1.2 与大数据组件的对比优势1.3 关键优势技术支撑1.4 Elasticsearch 的竞品1.4.1 全文搜索领域1.4.2 日志分析…...
SpringAI实战:ChatModel智能对话全解
一、引言:Spring AI 与 Chat Model 的核心价值 🚀 在 Java 生态中集成大模型能力,Spring AI 提供了高效的解决方案 🤖。其中 Chat Model 作为核心交互组件,通过标准化接口简化了与大语言模型(LLM࿰…...
MySQL的pymysql操作
本章是MySQL的最后一章,MySQL到此完结,下一站Hadoop!!! 这章很简单,完整代码在最后,详细讲解之前python课程里面也有,感兴趣的可以往前找一下 一、查询操作 我们需要打开pycharm …...
ubuntu22.04有线网络无法连接,图标也没了
今天突然无法有线网络无法连接任何设备,并且图标都没了 错误案例 往上一顿搜索,试了很多博客都不行,比如 Ubuntu22.04右上角网络图标消失 最后解决的办法 下载网卡驱动,重新安装 操作步骤 查看自己网卡的型号 lspci | gre…...
