This package has been deprecated

Author message:

this package has been deprecated

zyb-edit

基于quill进行二次发开，简化配置

---

特性

• 配置简单
• 开箱即用

安装

私用NPM

npm i zyb-edit --save --registry=http://fe.suanshubang.com/npm//

快速上手

界面展示：

方法一，NPM引入

import ZybEditor from "zyb-edit";

const edit = new ZybEditor(
    '#editor',{
    toolbar:'all', 
    disable:false, 
    value:'' //初始值
});

edit.on('init',function(){
    // 初始化完成
});

edit.on('change',function(){
    // 发生变化
});

在vue中使用

<quillEditor 
    v-model="xxxx"
    :toolbar="'all'"/>


<template>
<div class="zyb__editor">
    <slot name="toolbar"></slot>
    <div ref="zyb__editor"></div>
</div>
</template>
<script>
import ZybEditor from 'zyb-edit';

export default {
props: {
    toolbar,
    value: {
    type: String,
    default: '',
    },
    disable: {
    type: Boolean,
    default: false,
    },
    placeholder: {
    type: String,
    default: '请输入内容',
    },
},
data() {
    return {
    editor: null,
    content: '',
    };
},
watch: {
    value(nVal) {
    if (this.content !== nVal) {
        if (nVal) {
        this.editor.set(nVal);
        } else {
        this.editor.quill.setText('');
        }
    }
    },
},
mounted() {
    this.editor = new ZybEditor(
    this.$refs.zyb__editor, 
    {
        toolbar: this.toolbar || 'base', 
        disable: this.disable, 
        value: this.value,
    }
    );

    this.editor.on('init', () => {
    this.$emit('editorInit', this.editor);
    });

    this.editor.on('change', (e) => {
    this.content = e;
    this.$emit('input', e);
    });
},
};
</script>

参数

key	type	value	describe
el	String	无	必填字段，容器元素
toolbar	String/Fuction/Array	base	工具面板，支持通过函数/数组/类型初始化
placeholder	String	请输入内容	内容为空时默认文字
value	String	空	初始化内容
disable	Boolean	false	是否不可编辑

toolbar参数

支持使用函数或者数组进行初始化，或者通过all,base,media,fx这4个字段进行初始化

all:

[{ 'font': [] },{ 'size': [] },{ 'align': [] }],
['bold', 'italic', 'underline', 'strike',{ 'color': [] }, { 'background': [] }], 
['blockquote', 'code-block'],
[{ 'script': 'sub'}, { 'script': 'super' }],
[{ 'header': 1 }, { 'header': 2 }],
[{ 'list': 'ordered'}, { 'list': 'bullet' }],
['link','image','video','audio'],
['formula']

base:

[{ 'font': [] },{ 'size': [] },{ 'align': [] }],
['bold', 'italic', 'underline', 'strike',{ 'color': [] }, { 'background': [] }], 
['blockquote', 'code-block'],
[{ 'script': 'sub'}, { 'script': 'super' }],
[{ 'header': 1 }, { 'header': 2 }],
[{ 'list': 'ordered'}, { 'list': 'bullet' }],
['link','image']

media:

[{ 'font': [] },{ 'size': [] },{ 'align': [] }],
['bold', 'italic', 'underline', 'strike',{ 'color': [] }, { 'background': [] }], 
['blockquote', 'code-block'],
[{ 'script': 'sub'}, { 'script': 'super' }],
[{ 'header': 1 }, { 'header': 2 }],
[{ 'list': 'ordered'}, { 'list': 'bullet' }],
['link','image','video','audio'],

fx:

[{ 'font': [] },{ 'size': [] },{ 'align': [] }],
['bold', 'italic', 'underline', 'strike',{ 'color': [] }, { 'background': [] }], 
['blockquote', 'code-block'],
[{ 'script': 'sub'}, { 'script': 'super' }],
[{ 'header': 1 }, { 'header': 2 }],
[{ 'list': 'ordered'}, { 'list': 'bullet' }],
['link','image'],
['formula']

属性

key	value	describe
quill	Object	quill实例对象

方法

set:

设置编辑器值

edit.set('你好/n;quill');

---

get

获取编辑器值

constv value = edit.get();

---

on

移除绑定的事件

edit.on('change',function callBack(data){
    console.log(data)
});

---

off

移除绑定的事件

edit.off('change');
//移除指定函数
edit.off('change',callBack);

---

事件

事件名称	事件描述
init	组件初始化
change	内容发生变化

开发

• huxi mail:[e-mail]