editorxuwenbo v0.1.0

kpgui-editor

基于 Vue 对 Quil 富文本编辑器的二次封装，工具栏可配置，支持图片上传和编辑，支持音视频上传。浏览器兼容列表：IE11+、Edge、Chrome、FireFox。

安装

npm install --save @kpgui/editor

使用

• 全局注册

import Editor from '@kpgui/editor';
import '@kpgui/editor/lib/editor.css';

Vue.use(Editor);

<quill 
  v-model="content"></quill>

• 局部注册

也可以通过局部注册的方式引入，通常使用 Webpack 自带的 require 或 import 函数，以实现按需加载（参考 Vue 官方文档）。

components: {
  kpguiEditor: require('../packages/index').default.Editor
}

components: {
  kpguiEditor: () => {
    return import('../packages/index').then((data) => {
      return new Promise((resolve) => {
        resolve(data.default.Editor);
      });
    });
  }
}

注意：如果富文本数据输出所在的项目和富文本编辑所在的项目不是同一个项目，输出的地方需要单独引入富文本样式。

import '@kpgui/editor/lib/editor.css';

<div class="ql-container ql-snow">
  <div class="ql-editor>
    <!-- 数据放这里 -->
  </div>
</div>

接口

属性

事件

注：v-model 是 value 和 input 的语法糖，正常情况下 v-model 已满足需求，但是，也有手动控制 input、value 的场景，比如文字统计功能。