Vue富文本编辑器 vue-quill-editor

zlting~

于 2020-12-17 17:02:10 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： VUE 文章标签：富文本编辑

本文链接：https://blog.youkuaiyun.com/sunshineTing2/article/details/111319452

本文详细介绍了如何在Vue项目中使用vue-quill-editor富文本编辑器，包括下载插件、在main.js中引入以及在组件中具体应用的步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 下载`vue-quill-editor`插件

npm install --save vue-quill-editor

2. 在main.js中引入`vue-quill-editor`插件

import VueQuillEditor from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

Vue.use(VueQuillEditor)

3. 在.vue文件中使用`vue-quill-editor`插件

<quill-editor v-model="quillContent" :options="quillOption"></quill-editor>

import { quillEditor } from "vue-quill-editor"; // 调用编辑器
  import quillConfig from "@/utils/quill-config";
  export default {
  name: 'QuillEditor',
  components: {quillEditor},
  data() {
    return {
        quillContent: null,
	    quillOption: {
	        placeholder: "请输入创建板块标题",
	        theme: 'snow',
	        modules: quillConfig.modul