vue 使用 富文本编辑器

1安装依赖

npm i quill -S
npm i vue-quill-editor -S

2.上代码

<!-- 组件代码如下 -->
<template>
  <div class="edit_container">

    <!-- 编辑器 -->
    <quill-editor v-model="content" ref="myQuillEditor" :options="editorOption" @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
      @change="onEditorChange($event)">
    </quill-editor>

  </div>
</template>

<script>
  import {
    quillEditor
  } from "vue-quill-editor"; //调用编辑器
  import 'quill/dist/quill.core.css';
  import 'quill/dist/quill.snow.css';
  import 'quill/dist/quill.bubble.css';

  import axios from 'axios'

  export default {
    components: {
      quillEditor
    },
    data() {
      return {
        content: `请输入文章内容`,
        editorOption: {},
      }
    },
    methods: {
      onEditorReady(editor) { // 准备编辑器

      },
      onEditorBlur() {}, // 失去焦点事件
      onEditorFocus() {}, // 获得焦点事件
      onEditorChange(res) {

        console.log(res)
      }, // 内容改变事件

    },
    computed: {
      editor() {
        return this.$refs.myQuillEditor.quill;
      },
    }
  }
</script>


<style>
  .edit_container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    padding: 1.875rem 0;
  }

  .quill-editor {
    /* border: 1px solid #FF0000; */
    /* background: red; */
    height: 400px;
    width: 80%;

  }
</style>

3、结果

高宽可以自己调