前端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只能进行算术运算࿰…...
Vim 调用外部命令学习笔记
Vim 外部命令集成完全指南 文章目录 Vim 外部命令集成完全指南核心概念理解命令语法解析语法对比 常用外部命令详解文本排序与去重文本筛选与搜索高级 grep 搜索技巧文本替换与编辑字符处理高级文本处理编程语言处理其他实用命令 范围操作示例指定行范围处理复合命令示例 实用技…...
微软PowerBI考试 PL300-选择 Power BI 模型框架【附练习数据】
微软PowerBI考试 PL300-选择 Power BI 模型框架 20 多年来,Microsoft 持续对企业商业智能 (BI) 进行大量投资。 Azure Analysis Services (AAS) 和 SQL Server Analysis Services (SSAS) 基于无数企业使用的成熟的 BI 数据建模技术。 同样的技术也是 Power BI 数据…...
Java如何权衡是使用无序的数组还是有序的数组
在 Java 中,选择有序数组还是无序数组取决于具体场景的性能需求与操作特点。以下是关键权衡因素及决策指南: ⚖️ 核心权衡维度 维度有序数组无序数组查询性能二分查找 O(log n) ✅线性扫描 O(n) ❌插入/删除需移位维护顺序 O(n) ❌直接操作尾部 O(1) ✅内存开销与无序数组相…...
论文浅尝 | 基于判别指令微调生成式大语言模型的知识图谱补全方法(ISWC2024)
笔记整理:刘治强,浙江大学硕士生,研究方向为知识图谱表示学习,大语言模型 论文链接:http://arxiv.org/abs/2407.16127 发表会议:ISWC 2024 1. 动机 传统的知识图谱补全(KGC)模型通过…...
【AI学习】三、AI算法中的向量
在人工智能(AI)算法中,向量(Vector)是一种将现实世界中的数据(如图像、文本、音频等)转化为计算机可处理的数值型特征表示的工具。它是连接人类认知(如语义、视觉特征)与…...
汇编常见指令
汇编常见指令 一、数据传送指令 指令功能示例说明MOV数据传送MOV EAX, 10将立即数 10 送入 EAXMOV [EBX], EAX将 EAX 值存入 EBX 指向的内存LEA加载有效地址LEA EAX, [EBX4]将 EBX4 的地址存入 EAX(不访问内存)XCHG交换数据XCHG EAX, EBX交换 EAX 和 EB…...
k8s业务程序联调工具-KtConnect
概述 原理 工具作用是建立了一个从本地到集群的单向VPN,根据VPN原理,打通两个内网必然需要借助一个公共中继节点,ktconnect工具巧妙的利用k8s原生的portforward能力,简化了建立连接的过程,apiserver间接起到了中继节…...
在鸿蒙HarmonyOS 5中使用DevEco Studio实现录音机应用
1. 项目配置与权限设置 1.1 配置module.json5 {"module": {"requestPermissions": [{"name": "ohos.permission.MICROPHONE","reason": "录音需要麦克风权限"},{"name": "ohos.permission.WRITE…...
Pinocchio 库详解及其在足式机器人上的应用
Pinocchio 库详解及其在足式机器人上的应用 Pinocchio (Pinocchio is not only a nose) 是一个开源的 C 库,专门用于快速计算机器人模型的正向运动学、逆向运动学、雅可比矩阵、动力学和动力学导数。它主要关注效率和准确性,并提供了一个通用的框架&…...
2025季度云服务器排行榜
在全球云服务器市场,各厂商的排名和地位并非一成不变,而是由其独特的优势、战略布局和市场适应性共同决定的。以下是根据2025年市场趋势,对主要云服务器厂商在排行榜中占据重要位置的原因和优势进行深度分析: 一、全球“三巨头”…...
