使用quill富文本编辑器

努力学编程呀(๑•ี_เ•ี๑)

已于 2024-01-08 09:05:14 修改

阅读量550

点赞数 6

文章标签： javascript

于 2024-01-05 18:31:56 首次发布

本文链接：https://blog.csdn.net/YHLSunshine/article/details/134718708

版权

本文详细介绍了如何在Vue项目中安装并使用d2-quill和vue-quill-editor，包括全局引入和单个页面组件形式的使用示例。

摘要由CSDN通过智能技术生成

学习目标：

学习目标

了解quill富文本编辑器

学习内容：

内容

安装 d2-quill
npm install vue-quill-editor -S
引入到使用的项目中
（1）、全局引用

import Vue from 'vue'
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, 
/* {默认全局 */)

（2）、单个页面使用

//以组件 的形式在页面中进行引用
import { quillEditor } from 'vue-quill-editor'
 
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
 
export default {
  components: {
    quillEditor
  }
}

在页面中使用

 <el-form-item prop="comment" label="批注">
                <d2-quill style="min-height: 200px; margin-bottom: 20px; width:100%;" v-model="taskDataForm.comment" :disabled="true"/>
              </el-form-item>

在这里插入图片描述

 <el-form-item prop="content" label="事由">
                <d2-quill style="min-height: 200px; margin-bottom: 20px; width:100%;" v-model="taskDataForm.content" :disabled="true"/>
              </el-form-item>