基于vue的vue-quill-editor富文本编辑器使用方法

安装vue-quill-editor富文本编辑器

1	`npm install vue-quill-editor`

安装依赖

1	`npm install quill`

引入：

三个css文件一定要引入，要不没样式

全局引入：在main.js

import VueQuillEditor from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
  
Vue.use(VueQuillEditor)

局部引入

import { quillEditor } from "vue-quill-editor";
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
  
export default {
  name: "",
  components: {
    quillEditor,
  }
}

在vue页面中代码如下：

<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>
        <button v-on:click="saveHtml">保存</button>
    </div>  
</template>

<script>
export default {
  name: 'App',
  data(){
     return {
        content: `<p>hello world</p>`,
         editorOption: {
		 modules: {
	        toolbar: toolbarOptions,
	       },
	       theme: "snow",
	       placeholder: "请输入正文",
	       // Some Quill optiosn...
		}
     }
  },
  computed: {
     editor() {
          return this.$refs.myQuillEditor.quill;
      },
    },
    methods: {
      onEditorReady(editor) {},// 准备编辑器
       onEditorBlur(){}, // 失去焦点事件
       onEditorFocus(){}, // 获得焦点事件
       onEditorChange(){}, // 内容改变事件
       saveHtml:function(event){
         alert(this.content);
       }
   }
}



// 工具栏配置项
// https://quilljs.com/docs/modules/toolbar/      或     https://kang-bing-kui.gitbook.io/quill/wen-dang-document/mo-kuai-modules/toolbar
const toolbarOptions = [
  // 加粗 斜体 下划线 删除线、清除文本格式
  ["bold", "italic", "underline", "strike", "clean"],
  // 链接、图片、视频
  ["link", "image", "video"],
  // 引用  代码块
  ["blockquote", "code-block"],
  // 字体颜色、字体背景颜色
  [{ color: [] }, { background: [] }],
  // 有序、无序列表
  [{ list: "ordered" }, { list: "bullet" }],
  // 上标/下标
  [{ script: "sub" }, { script: "super" }],
  // 缩进
  [{ indent: "-1" }, { indent: "+1" }],
  // 文本方向
  [{ direction: "rtl" }],
  // 对齐方式
  [{ align: [] }],
  // 字体大小
  [{ size: ["small", false, "large", "huge"] }],
  // 标题
  [{ header: [1, 2, 3, 4, 5, 6, false] }],
  // 字体种类
  [{ font: [] }],
];
</script>

<style>
</style>

官网：

也可以使用cdn的方式在index.html引入：

<link rel="stylesheet" href="https://unpkg.com/quill@1.3.7/dist/quill.core.css">
<link rel="stylesheet" href="https://unpkg.com/quill@1.3.7/dist/quill.snow.css">
<link rel="stylesheet" href="https://unpkg.com/quill@1.3.7/dist/bubble.core.css">








<script src="https://unpkg.com/quill@1.3.7"></script>
<script src="https://unpkg.com/vue-quill-editor@3.0.6"></script>

然后在build/webpack.base.conf.js文件配置：