vue-quill-editor 富文本编辑器在 Vue 中最简单使用

第一次接触 vue-quill-editor 富文本编辑器，去Github上下载了源码 vue-quill-editor ，npm install 试了半天也跑不通，后来才知道是在 Vue项目中引入使用的，本次博客仅做最简单的使用分享

首先创建一个 Vue 项目，执行 vue create vue-editor 创建名为 vue-editor 的项目

项目创建成功后，在控制台输入

npm install vue-quill-editor --save

打开 main.js，进行引入

//引入vue-quill-editor 富文本编辑器
import VueQuillEditor from "vue-quill-editor/src";
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
Vue.use(VueQuillEditor)

接下来通过 <quill-editor></quill-editor> 标签即可进行使用

以 HelloWorld.vue 为例

<template>
  <div class="hello">
    <h1>vue-quill-editor富文本编辑器</h1>
    <quill-editor></quill-editor>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
}
</script>

<style scoped>

</style>

npm run serve 运行 Vue 项目即可