vue3-富文本编辑器(vue-quill)

官网:VueQuill | Rich Text Editor Component for Vue 3

安装

复制代码
 pnpm add @vueup/vue-quill@latest

使用

局部使用

先导包

复制代码
import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css';

再使用

复制代码
<QuillEditor theme="snow"></QuillEditor>

添加数据双向绑定,注意要一起设置内容类型

复制代码
          <QuillEditor
            v-model:content="formModel.content"
            content-type="html"
            theme="snow"
          ></QuillEditor>

重置内容

复制代码
组件ref名.value.setHTML(内容)
相关推荐
饺子不放糖2 分钟前
CSS的float布局,让我怀疑人生
前端
阳光是sunny18 分钟前
走进AI(1):细说RAG、MCP、Agent、Function Call
前端·ai编程
剪刀石头布啊27 分钟前
var、let、const与闭包、垃圾回收
前端·javascript
剪刀石头布啊28 分钟前
js常见的单例
前端·javascript
剪刀石头布啊29 分钟前
数据口径
前端·后端·程序员
剪刀石头布啊33 分钟前
http状态码大全
前端·后端·程序员
剪刀石头布啊35 分钟前
iframe通信、跨标签通信的常见方案
前端·javascript·html
宇之广曜44 分钟前
搭建 Mock 服务,实现前端自调
前端·mock
yuko09311 小时前
【手机验证码】+86垂直居中的有趣问题
前端
用户1512905452201 小时前
Springboot中前端向后端传递数据的几种方式
前端