Vue.js3.2引入VueQuill富文本编辑器

概述

官方文档：Introduction | VueQuill (vueup.github.io)

中文文档：vue-quill-editor · Quill官方中文文档 · 看云 (kancloud.cn)

编辑器的插件列举查看官网：Modules | VueQuill (vueup.github.io)，我实现了图片上传到服务器和图片缩放插件的使用，博客链接为：上传图片到服务器和实现图片的缩放

在几款适合Vue3的富文本编辑器中，我发现VueQuill最简单易用，不过也有一个BUG：数据无法双向绑定，页面的数据不会显示到富文本编辑器中，实现数据双向绑定的办法看下面

实现过程

安装插件

1	npm install @vueup/vue-quill@latest --save

局部引入

虽然可以全局引入，但是还是建议局部引入，首先引入组件和样式（在<script>标签中加入下面代码）

1 2	import {QuillEditor} from '@vueup/vue-quill' import '@vueup/vue-quill/dist/vue-quill.snow.css';

使用组件的代码如下

<QuillEditor
    v-model:content="content"
    placeholder="这里输入商品详情..."
    theme="snow"
    ref="editor"
    toolbar="full"
    contentType="html"
    style="height: 300px;"
/>

属性说明

属性	解释
`v-model:content="content"`	绑定的数据是content
`placeholder="这里输入商品详情..."`	内容为空时的提示
`theme="snow"`	主题
`ref="editor"`	这个是重点，定义editor使用官方的方法
`toolbar="full"`	工具栏的功能全部可以使用
`contentType="html"`	内容的格式是html

由于双向绑定没有用，所以需要使用官方的方法setHTML()设置值，首先上面使用编辑器的代码中要有ref="editor"，然后在<script>标签中定义一个空editor和上面对应，然后就可以使用编辑器的方法了

//定义一个空editor
const editor = ref(null);
//设置值
editor.value.setHTML("内容");

完整代码

只保留了和VueQuill富文本编辑器有关的代码

<template>
      <QuillEditor
          v-model:content="content"
          placeholder="这里输入商品详情..."
          theme="snow"
          ref="editor"
          toolbar="full"
          contentType="html"
          style="height: 300px;"
      />
</template>

<script setup>
import {ref, onMounted} from "vue";
import {QuillEditor} from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css';
const content = ref('');
const editor = ref(null);

//根据id获取商品
const getGoodsDetails = (id) => {
    //设置值
    editor.value.setHTML(response.data.goods.details);
}
</script>

<style scoped>

</style>