vue实现富文本编辑器的具体方法

可以实现富文本的插件:vue-quill-editoreditor-for-vue

我们以 editor-for-vue 为例实现:

传送门:wangEditor官网地址

安装:

npm install @wangeditor/editor --save
npm install @wangeditor/editor-for-vue --save

具体使用方法:
引入样式及组件

<template><div style="border: 1px solid #ccc"><Toolbarstyle="border-bottom: 1px solid #ccc":editor="editor":defaultConfig="toolbarConfig":mode="mode"/><Editor:disabled="disabled"style="height: 500px; overflow-y: hidden;"v-model="html":defaultConfig="editorConfig":mode="mode"@onCreated="handleCreated"/></div>
</template><script>
import '@wangeditor/editor/dist/css/style.css'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
export default {components: { Editor, Toolbar },// propsdata() {return {isView: true,editor: null,disabled: true,html: '<p>hello</p>',toolbarConfig: { },editorConfig: { placeholder: '请输入内容...' },mode: 'simple', // or 'default'}},methods: {handleCreated(editor) {this.editor = Object.seal(editor) // 一定要用 Object.seal() ,否则会报错// 实现编辑器的禁用if(this.isView){this.editor.disable()}},},beforeDestroy() {const editor = this.editorif (editor == null) returneditor.destroy() // 组件销毁时,及时销毁编辑器}
}
</script><style></style>

实现效果:
在这里插入图片描述

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

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

相关文章

分布式锁的原子性问题

4.6 分布式锁的原子性问题 更为极端的误删逻辑说明&#xff1a; 线程1现在持有锁之后&#xff0c;在执行业务逻辑过程中&#xff0c;他正准备删除锁&#xff0c;而且已经走到了条件判断的过程中&#xff0c;比如他已经拿到了当前这把锁确实是属于他自己的&#xff0c;正准备删…

【matlab非线性规划工具箱安装2 GloptiPoly 3.10工具箱】

【matlab非线性规划工具箱安装2 GloptiPoly 3.10工具箱】 该博客是非线性手眼标定代码中所依赖的matlab工具箱的安装内容&#xff0c;除了进行手眼标定以外&#xff0c;该工具箱还可以用于其他的非线性规划问题 在安装该工具箱之前请先安装SeDuMi 手眼标定传送门&#xff1a…

实验案例一:交换机的初始配置

1、实验环境 实验用具包括一台 Cisco 交换机&#xff0c;一台 PC&#xff0c;一根 Console 线缆。 2、需求描述 如图 5.17 所示&#xff0c;实验案例一的配置需求如下。 通过 PC 连接并配置一台 Cisco 交换机在交换机的各个配置模式之间切换将交换机主机的名称改为 BDON 3、…

上门服务小程序|上门服务系统|上门服务软件开发流程

在如今快节奏的生活中&#xff0c;上门服务小程序的需求越来越多。它们向用户提供了方便、高效的服务方式&#xff0c;解决了传统服务行业中的很多痛点。如果你也想开发一个上门服务小程序&#xff0c;以下是开发流程和需要注意的事项。 1、确定需求&#xff1a;在开始开发之前…

[C++][算法基础]排列数字(DFS)

给定一个整数 n&#xff0c;将数字 1∼n 排成一排&#xff0c;将会有很多种排列方法。 现在&#xff0c;请你按照字典序将所有的排列方法输出。 输入格式 共一行&#xff0c;包含一个整数 n。 输出格式 按字典序输出所有排列方案&#xff0c;每个方案占一行。 数据范围 …

✌2024/4/3—力扣—整数反转

代码实现&#xff1a; int reverse(int x) {long num 0;while (x ! 0) {num num * 10 x % 10;x x / 10;}if ((int)num ! num) {return 0;}return (int)num; }

Spring Cloud微服务入门(五)

Sentinel的安装与使用 安装部署Sentinel 下载Sentinel&#xff1a; https://github.com/alibaba/Sentinel/releases Sentinel控制台 https://localhost:8080 用户和密码为sentinel 使用Sentinel 加依赖&#xff1a; 写配置&#xff1a; 输入&#xff1a; java -Dserver.po…

UI自动化测试-pytest框架

&#x1f525; 交流讨论&#xff1a;欢迎加入我们一起学习&#xff01; &#x1f525; 资源分享&#xff1a;耗时200小时精选的「软件测试」资料包 &#x1f525; 教程推荐&#xff1a;火遍全网的《软件测试》教程 &#x1f4e2;欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1…

Lua热更新(AssetBundle)

AssetBundle 新版本导入ab包报错,则删除其中的Tests文件夹。 给资源分组 打包设置:平台、路径、重复打包清空文件夹、复制到streaming文件夹 建议勾选 建议使用LZ4压缩方式 用来观察文件中的包大小,不常用 参数总结: 这六个只做了解,重要的是上面的

深入解析Cookie、Session以及Token原理

一、概述 1.1 HTTP无状态问题 目前主流的服务采用的是B\S架构&#xff0c;即浏览器\服务端架构。一般采用的协议是HTTP&#xff0c;HTTP有个特点是无状态&#xff0c;即在一次连接&#xff0c;两次成功请求之间没有任何的关系。这个特性既带来了一定的优点&#xff0c;在某些…

Struts2的入门:新建项目——》导入jar包——》jsp,action,struts.xml,web.xml——》在项目运行

文章目录 配置环境tomcat 新建项目导入jar包新建jsp界面新建action类新建struts.xml,用来配置action文件配置Struts2的核心过滤器&#xff1a;web.xml 启动测试给一个返回界面在struts.xml中配置以实现页面的跳转&#xff1a;result再写个success.jsp最后在项目运行 配置环境 …

【数据分享】我国第七次人口普查的100m分辨率人口栅格数据(免费获取\tif格式\2020年)

人口空间分布数据是我们在各项研究中经常使用的数据。之前我们分享过来源于LandScan数据集的2000-2022年的1km精度的人口空间分布栅格数据&#xff08;可查看之前的文章获悉详情&#xff09;&#xff01; 相较于LandScan全球人口数据集&#xff0c;我国历次人口普查的数据对于…

SpringBoot通用模块--文件上传开发(阿里云OSS)

文件上传&#xff0c;是指将本地图片、视频、音频等文件上传到服务器上&#xff0c;可以供其他用户浏览或下载的过程。文件上传在项目中应用非常广泛&#xff0c;我们经常发抖音、发朋友圈都用到了文件上传功能。 实现文件上传服务&#xff0c;需要有存储的支持&#xff0c;那…

基于支持 GPT 的服务的初创公司

Kafkai&#xff1a;多语言长篇内容生成&#xff0c;AI写作的新趋势 介绍 随着生成式预训练 Transformer (GPT) 的出现&#xff0c;技术世界正在见证范式转变。 这种人工智能驱动的创新不仅仅是一种转瞬即逝的趋势&#xff0c;而是一种趋势。 它已成为科技行业的基石&#xff0c…

部分国企笔试总结

2024.3.30相城区某国企笔试 客观题&#xff0c;30分 类似考公行测题&#xff08;大部分&#xff09;部分计算机专业基础知识&#xff08;仅几题&#xff09; 主观题&#xff0c;70分 网络安全类一道C编程题&#xff1a;用户输入圆半径r&#xff0c;程序计算面积和周长并输出…

【C语言】简单介绍进制和操作符

&#x1f308;个人主页&#xff1a;是店小二呀 &#x1f308;C语言笔记专栏&#xff1a;C语言笔记 &#x1f308;C笔记专栏&#xff1a; C笔记 &#x1f308;喜欢的诗句:无人扶我青云志 我自踏雪至山巅 本文简要介绍进制和操作符&#xff0c;愿能为您提供帮助&#xff01;文章…

异常的种类

Oracle从入门到总裁:​​​​​​https://blog.csdn.net/weixin_67859959/article/details/135209645 Oracle 运行时错误可以分为 Oracle 错误和用户自定义错误&#xff0c;与此对应&#xff0c;根据异常产生的机制和原理&#xff0c;可将 Oracle 的系统异常分为 3 种 预定义…

【Linux】libgpiod使用方法

1、libgpiod库的移植 参见本人博客:libgpiod库的移植 2、libgpiod使用 2.1 打开GPIO芯片 一个GPIO芯片管理N个GPIO,每个GPIO芯片用结构体 ==gpiod_chip == 来表示。 1)以路径方式打开 例如GPIO芯片的路径为:/dev/gpiochip0 struct gpiod_chip *gpiod_chip_open(const …

使用VPN时,Java程序无法访问远程网络的解决办法

应用场景&#xff1a; 电脑连接VPN之后&#xff0c;Java程序无法连接远程服务&#xff0c;比如第三方接口、远程数据库连接、远程微服务等。我个人遇到的情况有连接海康威视SDK&#xff0c;influxdb以及一些微服务。 解决办法&#xff1a; 启动Java时加入参数&#xff1a;-D…

一个嵌入式ucosII系统的典型代码范例

在嵌入式系统开发中&#xff0c;uC/OS-II是一个非常流行的实时操作系统。它提供了许多功能&#xff0c;包括任务管理、信号量、消息邮箱、事件标志等&#xff0c;使得开发者能够更轻松地实现复杂的系统功能。在本文中&#xff0c;我们将展示一个完整的uC/OS-II示例代码&#xf…