zaki-dxp-rich-editor

基于 Quill 1.x（Snow 主题） + vue-demi，在 Vue 2 / Vue 3 中使用的富文本编辑器封装。支持 ESM / CommonJS，TypeScript 与纯 JavaScript 均可。

安装

npm install zaki-dxp-rich-editor quill@^1.3.7 [email protected]

Vue 2.6 需额外：

npm install @vue/composition-api

quill 已列入本包 dependencies，一般只需装本包即可；若需锁定 Quill 版本可显式安装。

样式

import "zaki-dxp-rich-editor/style.css";

Vue 3 + <script setup>（纯 JS）

<template>
  <ZakiRichEditor v-model="html" placeholder="请输入…" min-height="280px" @ready="onReady" />
</template>

<script setup>
import { ref } from "vue";
import { ZakiRichEditor } from "zaki-dxp-rich-editor";
import "zaki-dxp-rich-editor/style.css";

const html = ref("<p>你好</p>");

function onReady(quill) {
  console.log("Quill 实例", quill);
}
</script>

选项式 API（Vue 2 / 3）

<template>
  <ZakiRichEditor v-model="content" />
</template>

<script>
import { ZakiRichEditor } from "zaki-dxp-rich-editor";
import "zaki-dxp-rich-editor/style.css";

export default {
  components: { ZakiRichEditor },
  data() {
    return { content: "" };
  },
};
</script>

自定义工具栏

<ZakiRichEditor
  v-model="html"
  :options="{
    modules: {
      toolbar: [['bold', 'italic'], ['link']],
    },
  }"
/>

传入 options.modules 时会整体替换默认 modules（含 toolbar）；需要默认时可不传 modules，或只传其它 Quill 选项。

全局注册

import { createApp } from "vue";
import ZakiRichEditorPlugin from "zaki-dxp-rich-editor";
import "zaki-dxp-rich-editor/style.css";

createApp(App).use(ZakiRichEditorPlugin);

Vue 2：Vue.use(require("zaki-dxp-rich-editor").default)。

事件

| 事件 | 说明 | |------|------| | update:modelValue | 内容 HTML 变化 | | ready | Quill 实例创建完成 | | text-change | Quill text-change | | selection-change | 选区变化（附带 quill） |

许可

MIT。Quill 为 BSD-3-Clause，见 quill。