vue实现富文本

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

一、安装依赖

npm install vue-quill-editor --save

二、具体使用

html

<template><!-- 富文本 --><quill-editorref="myQuillEditor"v-model="content":options="editorOption"@blur="onEditorBlur($event)"@focus="onEditorFocus($event)"@ready="onEditorReady($event)"@change="onEditorChange($event)"/>
</template>

js

<script>
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import { quillEditor } from "vue-quill-editor";
export default {components: { quillEditor },data() {return {content: "", // 文本内容editorOption: {placeholder: "请输入需要编写的内容...",theme: 'snow',modules: {// imageResize: {},toolbar: [['zoom-in-image', 'zoom-out-image'], // 自定义按钮,用于放大缩小图片["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线["blockquote", "code-block"], // 引用  代码块[{ header: 1 }, { header: 2 }], // 1、2 级标题[{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表[{ script: "sub" }, { script: "super" }], // 上标/下标[{ indent: "-1" }, { indent: "+1" }], // 缩进[{ direction: "rtl" }], // 文本方向[{size: ['small', false, 'large', 'huge']},], // 字体大小[{ header: [1, 2, 3, 4, 5, 6] }], // 标题[{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色// [{ font: [] }], // 字体种类[{ align: [] }], // 对齐方式["clean"], // 清除文本格式["image", "video"], // 链接、图片、视频],}},   //参数};},methods: {// 失去焦点事件onEditorBlur() {},// 获得焦点事件onEditorFocus() {},// 准备编辑器onEditorReady() {},// 内容改变事件onEditorChange() {},},watch: {// 监听文本变化内容content() {console.log(this.content);},},
};
</script>

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

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

相关文章

【模拟】算法实战

文章目录 一、算法原理二、算法实战1. leetcode1576 替换所有的问号2. leetcode495 提莫攻击3. leetcode6 N字形变换4. leetcode38 外观数列5. leetcode1419 数青蛙 三、总结 一、算法原理 模拟就是用计算机来模拟题目中要求的操作&#xff0c;模拟题目通常具有代码量大、操作…

Docker - Docker安装MySql并启动

因为项目需要连接数据库&#xff0c;但是远程服务器上的mysql我不知道账户和密码&#xff0c;这个时候便是docker发挥作用的关键时刻了&#xff01; 目录 docker安装安装gcc卸载老docker&#xff08;如有&#xff09;安装软件包设置镜像仓库更新yum软件包索引安装docker启动doc…

2023_Spark_实验二:IDEA安装及配置

一、下载安装包 链接&#xff1a;百度网盘 请输入提取码 所在文件夹&#xff1a;大数据必备工具--》开发工具(前端后端)--》后端 下载文件名称&#xff1a;ideaIU-2019.2.3.exe &#xff08;喜欢新版本也可安装新版本&#xff0c;新旧版本会存在部分差异&#xff09; IDEA …

线性代数的学习和整理11: 子式与余子式

目录 1 原始矩阵A 2 子式&#xff08;都是行列式&#xff09; 2.1 k阶子式&#xff08;行数列数即可&#xff09; 比如1阶子式&#xff1a;因为只有1行1列 比如2阶子式&#xff1a;因为有2行2列 比如3阶子式&#xff1a;因为有3行3列 2.2 k阶主子式 {行序号数组} {列序号…

VS的调试技巧

Visual Studiohttps://visualstudio.microsoft.com/zh-hans/vs/ 目录 1、什么是调试&#xff1f; 2、debug和release 3、调试 3.1、环境 3.2、 快捷键 3.2.1、F10和F11 3.2.2、ctrlF5 3.2.3、F5与F9 3.2.3.1、条件断点 3.3、监视和内存观察 3.3.1、监视 3.3.2、内存 …

CSS中如何实现元素之间的间距(Margin)合并效果?

聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ 外边距合并的示例&#xff1a;⭐ 如何控制外边距合并&#xff1a;⭐ 写在最后 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 记得点击上方或者右侧链接订阅本专栏哦 几何带你启航前端之旅 欢迎来到前端入门之旅&#xff…

Redis 列表 | Navicat

在最近的博客 文章 中&#xff0c;我们已经了解了 Redis 的六种数据类型。其中&#xff0c;Redis 列表&#xff08;List&#xff09;包含一组字符串&#xff0c;他们按照被添加的顺序进行排序。本文将就列表数据类型进行展开介绍&#xff0c;并且重点介绍一些主要的命令来管理它…

探索Python的魔法世界,开启编程奇幻之旅!

无需魔杖&#xff0c;只需键盘&#xff0c;Python将带你进入一个充满奇幻和创造力的世界。本篇博客将引领你走进Python的魔法大门&#xff0c;从编程新手蜕变为编码魔法师&#xff0c;开启一段激动人心的编程奇幻之旅。 &#x1f340;引言 如果你是一名编程初学者&#xff0c;并…

精准运营,智能决策!解锁天翼物联水利水务感知云

面向智慧水利/水务数字化转型需求&#xff0c;天翼物联基于感知云平台创新能力&#xff0c;提供涵盖水利水务泛协议接入、感知云水利/水务平台、水利/水务感知数据治理、数据看板在内的水利水务感知云服务&#xff0c;构建水利水务感知神经系统新型数字化底座&#xff0c;实现智…

【ArcGIS Pro二次开发】(63):批量更改字段别名

在我工作中遇到的大多数图斑&#xff0c;字段名称一般是英文&#xff0c;字段别名是中文&#xff0c;使用起来是比较方便的。 但有时候也会遇到一些不一样的情况&#xff0c;不知是经过了怎样的处理&#xff0c;图斑的字段别名被修改成了和字段名称一样的英文&#xff0c;这样…

Visual Studio 2022的MFC框架——AfxWinMain全局对象和InitInstance函数

我是荔园微风&#xff0c;作为一名在IT界整整25年的老兵&#xff0c;今天我们来重新审视一下Visual Studio 2022下开发工具的MFC框架知识。 在看这篇帖子前&#xff0c;请先看我的另一篇帖子《Visual Studio 2022的MFC框架——应用程序向导》。 当程序调用了CWinApp类的构造…

度矩阵、邻接矩阵

度矩阵&#xff08;degree matrix&#xff09; 度矩阵是对角阵&#xff0c;对角上的元素为各个顶点的度&#xff0c;顶点vi的度表示和该顶点相关联的变得数量。 在无向图中&#xff0c;顶点vi的度d(vi)N(i)&#xff08;即与顶点相连的边的数目&#xff09;有向图中&#xff0…

PHP8函数的引用和取消-PHP8知识详解

今天分享的是php8函数的引用和取消&#xff0c;不过在PHP官方的参考手册中&#xff0c;已经删除了此类教程。 1、函数的引用 在PHP8中不管是自定义函数还是内置函数&#xff0c;都可以直接简单的通过函数名调佣。函数的引用大致有下面3种&#xff1a; 1.1、如果是PHP的内置函…

mysql sql_mode数据验证检查

sql_mode 功能 sql_mode 会影响MySQL支持的sql语法以及执行的数据验证检查。通过设置sql_mode ,可以完成不同严格程度的数据校验&#xff0c;有效地保障数据准确性 sql_mode 严格模式 VS 宽松模式 宽松模式 比如&#xff0c;插入的数据不满足 表的数据类型&#xff0c;也可能…

Vulnhub: Ragnar Lothbrok: 1靶机

kali&#xff1a;192.168.111.111 靶机&#xff1a;192.168.111.226 信息收集 端口扫描 nmap -A -sC -v -sV -T5 -p- --scripthttp-enum 192.168.111.226 作者提示修改hosts文件 目录爆破 gobuster dir -u http://armbjorn -w /usr/share/wordlists/dirbuster/directory-l…

【FreeRTOS】【应用篇】任务管理相关函数

文章目录 前言一、函数解析1. 任务挂起 vTaskSuspend()① 使用场景② 设计思路③ 代码 2. 任务恢复 vTaskResume()① 作用② 设计思路③ 代码 3. 挂起任务调度器 vTaskSuspendAll()① 作用② 代码 4. 恢复任务调度器 xTaskResumeAll()① 设计思路② 代码 5. 任务删除函数 vTask…

Servlet的使用(JavaEE初阶系列17)

目录 前言&#xff1a; 1.Servlet API的使用 1.1HttpServlet 1.2HttpServletRequest 1.3HttpServletResponse 2.表白墙的更新 2.1表白墙存在的问题 2.2前后端交互接口 2.3环境准备 2.4代码的编写 2.5数据的持久化 2.5.1引入JDBC依赖 2.5.2创建数据库 2.5.3编写数…

ELK高级搜索(二)

文章目录 7&#xff0e;Java api 文档管理7.1 es技术特点7.2 获取数据7.3 文档查询7.4 文档新增7.5 文档修改7.6 文档删除7.7 文档bulk 8&#xff0e;图解es内部机制8.1 es分布式基础8.2 分片shard、副本replica8.3 单node环境创建index8.4 多node环境replica shard8.5 横向扩容…

Quartus II安装下载驱动

Quartus II安装下载驱动 安装步骤&#xff1a; &#xff08;1&#xff09;安装完quartus后会自带USB-Blaster的驱动程序&#xff0c;因此不用再去网上下载。 &#xff08;2&#xff09;右键点脑左下角win&#xff0c;找到设备管理器并进入。 &#xff08;3&#xff09;找到…

Python爬虫 异步、缓存技巧

在进行大规模数据抓取时&#xff0c;Python爬虫的速度和效率是至关重要的。本文将介绍如何通过异步请求、缓存和代理池等技巧来优化Python爬虫的速度和性能。我们提供了实用的方案和代码示例&#xff0c;帮助你加速数据抓取过程&#xff0c;提高爬虫的效率。 使用异步请求、缓…