vue中使用quill富文本编辑器

985 阅读1分钟

1.下载依赖

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

2.直接在组件中,或页面中使用,代码

注意:我的提交按钮用了element-ui组件库的提示组件

<template>
  <div class="edii_page">
    <!-- 富文本编辑器 -->
    <quill-editor
      class="editor"
      v-model="content"
      ref="myQuillEditor"
      :options="editorOption"
      @blur="onEditorBlur($event)"
      @focus="onEditorFocus($event)"
      @change="onEditorChange($event)"
    >
    </quill-editor>
    <!-- 提交按钮 -->
    <el-button
      type="primary"
      @click="onSubmit"
    >提交</el-button>
  </div>

</template>
<script>
import { quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.snow.css' // 富文本编辑器外部引用样式  三种样式三选一引入即可
// import 'quill/dist/quill.core.css'
// import 'quill/dist/quill.bubble.css'
export default {
  data () {
    return {
      content: '',
      editorOption: {
        placeholder: '文本编辑'
      }
    };
  },
  mounted () {
    this.$nextTick(function() {
        this.$refs.myQuillEditor.quill.blur();
      });
  },
  methods: {
    onEditorBlur () {
    },
    onEditorFocus () {//获得焦点事件
    },
    onEditorChange (val) {//内容改变事件
    },
    onSubmit () {
      if (this.content === null) {
        this.$message({
          duration: 1 * 1500,
          message: '内容不能空提交!',
          type: 'warning',
        });
      } else {
        console.log(this.content)
        this.$message({
          duration: 1 * 1500,
          message: '提交成功!',
          type: 'success',
        });
      }

    }
  }
}
</script>
 
<style scoped lang="scss">
.edii_page {
  text-align: center;
}
.editor {
  height: 350px;
  padding: 40px;
  margin-bottom: 40px;
  text-align: left;
}
</style>


其他富文本编辑器可以参考:element-ui-admin中文文档:

panjiachen.github.io/vue-element…

element-ui-admin 专用的富文本编辑器 中文文档 www.tiny.cloud/docs/integr…