1)安装 vue-quill-editor 依赖

npm install vue-quill-editor --save
2)入口文件main.js中引入

// 引入富文本编辑器

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)具体需要使用富文本编辑器中的组件中使用

2⃣️使用

<template>
  <div>
    富文本编辑器
    <div class="editor">
      <quill-editor ref="myTextEditor" :options="editorOption" 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: {
        placeholder: "placeholder",
        // 编辑器的配置
        // something config
        theme: "bubble"
      }
    };
  },
  components: {
    quillEditor
  },
};
</script>
文档更新时间: 2019-06-12 18:56   作者:如默