vue项目中富文本编辑器vue-quill-editor的使用

前端开发过程中，会遇到在页面上加入富文本编辑器，在vue项目中开发遇到这一需求的时候，我们可以使用富文本编辑器vue-quill-editor，话不多说，先上一张效果图：

1）安装 vue-quill-editor 依赖

[code]npm install vue-quill-editor --save

2）入口文件main.js中引入

[code]// 引入富文本编辑器
import VueQuillEditor from 'vue-quill-editor'
// require styles 引入样式
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
Vue.use(VueQuillEditor)

3）具体需要使用富文本编辑器中的组件中使用

1⃣️组件内部引入富文本编辑器

[code]import { quillEditor } from "vue-quill-editor"; // 导入quillEditor组件

2⃣️使用

[code]<template>
<div>
富文本编辑器
<div class="editor">
<quill-editor ref="myTextEditor" v-model="content" :config="editorOption"></quill-editor>
</div>
</div>
</template>
<script>
import { quillEditor } from "vue-quill-editor"; // 导入quillEditor组件
import 'quill/dist/quill.js';
export default {
data() {
return {
content: "this is a simple demo", // 编辑器的内容
editorOption: {
// 编辑器的配置
// something config
theme: "bubble"
}
};
},
components: {
quillEditor
},
};
</script>

就这样，在我们的项目中就添加好了一个富文本编辑框。数据content就是我们要传到后台保存的数据，更多api也可参照其文档，文档链接https://quilljs.com/docs/quickstart/。