富文本编辑器

quillEditor富文本编辑器

Quill是轻型的编辑器，样式一般（黑白风），功能中等，它的代码高亮功能比较强，同样支持行内编辑模式，工具条可自定义。开源免费，项目活跃，一直有人维护。

1、下载及安装：

npm install vue-quill-editor --save
也可使用淘宝镜像下载
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install vue-quill-editor --save

2、使用：

<template>
	<div>
	 //富文本编辑器最外层须有一个父级元素，加上ql-editor类名。否则回显样式不正确
		<div class="ql-editor"> 
            <quill-editor 
                v-model="content" 
                ref="myQuillEditor" 
                :options="editorOption" 
                @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
                @change="onEditorChange($event)">
            </quill-editor>
         </div>
	</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';
export default{
 	components:{
      quillEditor
    },
	data(){
		return{
			content:'',
          	editorOption: {   //工具项配置
              modules: {
                toolbar: [
                  ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
                  ["blockquote", "code-block"], // 引用  代码块
                  [{ header: 1 }, { header: 2 }], // 1、2 级标题
                  [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表
                  [{ script: "sub" }, { script: "super" }], // 上标/下标
                  [{ indent: "-1" }, { indent: "+1" }], // 缩进
                  // [{'direction': 'rtl'}],                         // 文本方向
                  [{ size: ["small", false, "large", "huge"] }], // 字体大小
                  [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
                  [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
                  [{ font: [] }], // 字体种类
                  [{ align: [] }], // 对齐方式
                  ["clean"], // 清除文本格式
                  ["link", "image", "video"] // 链接、图片、视频
                ] // 工具菜单栏配置
              },
              placeholder: '请在这里添加产品描述', // 提示
              readyOnly: false,  // 是否只读
              theme: 'bubble',  // 主题 snow/bubble
              syntax: true  // 语法检测
            },
		}
	},
	computed: {
        editor() {
            return this.$refs.myQuillEditor.quill;
        }
    },
	methods:{
		// 准备编辑器
		onEditorReady(editor) { 
        	console.log(editor);
        },
        // 失去焦点事件
        onEditorBlur(file){
          console.log(file, "失去焦点");
        }, 
        // 获得焦点事件
        onEditorFocus(file){
          console.log(file, "获得焦点");
        }, 
         // 内容改变事件
        onEditorChange(file){
          console.log(file, "内容改变");
        }
	}
}
</script>

更多api可参照其文档，文档链 https://quilljs.com/docs/quickstart/