Leafer HTMLText Editor

一个强大的 Leafer UI 富文本编辑器插件，集成 Quill 2.0，支持 HTML 文本编辑和丰富的文本样式控制。

English Document

✨ 特性

• 🎨 富文本编辑 - 基于 Quill 2.0，支持完整的富文本编辑功能

• 🔤 多语言字体 - 支持自定义字体

• 📐 文本样式 - 字体、大小、颜色、对齐、行高、字间距等全面控制

• 📝 格式化工具 - 加粗、斜体、下划线、删除线、上下标

• 📋 列表支持 - 有序列表、无序列表

• 🎯 完美集成 - 无缝集成到 Leafer UI 生态系统

• 🔐 授权管理 - 内置授权系统，本地开发不限制，上线有授权检测，需要联系作者

• 📦 轻量级 - 代码混淆压缩，体积小，加载快

• 🔧 TypeScript - 完整的类型定义支持

• 🚀 现代化构建 - ESM + CJS 双格式，支持 Tree Shaking

• 插件官网

• 在线演示

• 问题反馈

📦 安装

npm install @chenyomi/leafer-htmltext-edit

或使用其他包管理器：

# pnpm
pnpm add @chenyomi/leafer-htmltext-edit

# yarn
yarn add @chenyomi/leafer-htmltext-edit

Peer Dependencies

本插件需要以下依赖（请确保已安装）：

npm install leafer-ui @leafer-ui/core @leafer-in/editor @leafer-in/html quill

🚀 快速开始

Vite 项目配置

为了确保插件正常工作，建议在 Vite 配置中添加以下设置：

// vite.config.ts
import { defineConfig } from "vite";

export default defineConfig({
  resolve: {
    // 确保使用项目的依赖实例
    dedupe: [
      "@leafer-ui/core",
      "@leafer-in/editor",
      "@leafer-in/html",
      "leafer-ui",
      "quill",
    ],
  },
  optimizeDeps: {
    // 排除插件的预构建
    exclude: ["@chenyomi/leafer-htmltext-edit"],
  },
});

Webpack 项目配置

// webpack.config.js
module.exports = {
  resolve: {
    // 确保使用单一实例
    alias: {
      quill: require.resolve("quill"),
      "@leafer-ui/core": require.resolve("@leafer-ui/core"),
      "@leafer-in/editor": require.resolve("@leafer-in/editor"),
      "@leafer-in/html": require.resolve("@leafer-in/html"),
      "leafer-ui": require.resolve("leafer-ui"),
    },
  },
};

在 Vue 3 中使用

<template>
  <div id="leafer-view" style="width: 100vw; height: 100vh;"></div>
</template>

<script setup lang="ts">
import { onMounted } from "vue";
import { App } from "leafer-ui";
import "leafer-editor";
import {
  htmlTextManage,
  setLicense,
  setHTMLText,
  HtmlText,
} from "@chenyomi/leafer-htmltext-edit";

onMounted(async () => {
  // 1. 设置 License（必须在 init 之前）
  const licenseKey = "授权请联系作者";
  const success =  await setLicense(licenseKey);

  if (!success) {
    console.error("License validation failed");
    // 可以显示错误提示给用户
  }
  const leafer = new App({
    view: "leafer-view",
    fill: "#ffffff",
    editor: {},
  });
  htmlTextManage.init(leafer);
  let { width = 1200, height = 960 } = leafer;
  const text_ = new HtmlText({
    editOuter: "TextEditTool",
    name: "Text",
    x: width / 2 - 100,
    y: height * 0.4,
    editable: true,
    draggable: true,
    fontFamily: undefined,
    fontSize: 30,
    lineHeight: 1.5,
    letterSpacing: 0,
    textShadow: undefined,
    alignContent: "start",
  });
  leafer.tree.add([text_]);
});
</script>

在 React 中使用

// 参考vue3 示例 懒得写demo了

在 Angular 中使用

// 参考vue3 示例 懒得写demo了

📚 API 文档

HtmlTextManage

单例模式的编辑器管理器，负责管理 Quill 实例和文本编辑。

静态方法

init(app: any): Promise<Quill>

初始化 Quill 编辑器并绑定到 Leafer 应用。

const quill = await HtmlTextManage.init(app);

参数:

• app - Leafer App 实例

返回: Promise - Quill 编辑器实例

getQuill(): Quill

获取 Quill 实例。

const quill = HtmlTextManage.getQuill();

返回: Quill - Quill 编辑器实例

getCanvas(): any

获取 Leafer App 实例。

const app = HtmlTextManage.getCanvas();

返回: App - Leafer 应用实例

isMultiSelect(): boolean

判断是否为多选状态（选中了多个对象）。

if (HtmlTextManage.isMultiSelect()) {
  console.log("Multiple objects selected");
}

返回: boolean - 是否多选

dateEdit(callback: (leaf: any) => void, level?: number, listNew?: any): void

批量编辑选中的对象。

HtmlTextManage.dateEdit((leaf) => {
  leaf.fontSize = 20;
  leaf.fill = "#ff0000";
});

参数:

• callback - 编辑回调函数，接收每个选中的对象
• level? - 可选，编辑层级
• listNew? - 可选，新对象列表

授权管理

插件内置授权系统，支持商业使用。

setLicense(licenseKey: string): boolean

设置授权密钥。

import { setLicense } from "@chenyomi/leafer-htmltext-edit";

const success = setLicense("your-license-key");
if (success) {
  console.log("License activated successfully");
}

参数:

• licenseKey - 授权密钥字符串

返回: boolean - 是否成功激活

checkLicense(): boolean

检查授权状态。

import { checkLicense } from "@chenyomi/leafer-htmltext-edit";

if (checkLicense()) {
  console.log("License is valid");
} else {
  console.log("License is invalid or expired");
}

HtmlText

自定义的 HTML 文本类，扩展自 Leafer 的文本对象。

import { HtmlText } from "@chenyomi/leafer-htmltext-edit";

// HtmlText 会自动注册到 Leafer 中
// 可以直接在 Leafer 中使用

工具函数

updataHtmlText(obj: any): void

更新 HTML 文本对象。

import { updataHtmlText } from "@chenyomi/leafer-htmltext-edit";

updataHtmlText(textObject);

setHTMLText(type: string, value: any, inner: any, editor: any, multi: boolean): void

设置 HTML 文本属性。

import { setHTMLText } from "@chenyomi/leafer-htmltext-edit";

// 设置字体大小
setHTMLText("fontSize", 24, null, editor, false);

🎨 使用示例

设置文本样式

import { setHTMLText } from "@chenyomi/leafer-htmltext-edit";

<button @click="setHTMLText('bold')">加粗</button>
<button @click="setHTMLText('italic')">斜体</button>
<button @click="setHTMLText('underline')">下划线</button>
<button @click="setHTMLText('strike')">删除线</button>
<button @click="setHTMLText('textCase')">大小写</button>
<button @click="setHTMLText('script', 'super')">上标</button>
<button @click="setHTMLText('script', 'sub')">下标</button>
<button @click="setHTMLText('align', false)">左对齐</button>
<button @click="setHTMLText('align', 'center')">居中对齐</button>
<button @click="setHTMLText('align', 'right')">右对齐</button>
<button @click="setHTMLText('alignContent', 'start')">顶部对齐</button>
<button @click="setHTMLText('alignContent', 'center')">垂直居中</button>
<button @click="setHTMLText('alignContent', 'end')">底部对齐</button>
<button @click="setHTMLText('list', 'ordered')">有序列表</button>
<button @click="setHTMLText('list', 'bullet')">无序列表</button>
<button @click="setHTMLText('color', '#3CB72C')">#3CB72C</button>
<button @click="setHTMLText('color', '#000000')">#000000</button>
<button @click="setHTMLText('lineHeight', 1.5)">行高1.5</button>
<button @click="setHTMLText('lineHeight', 3)">行高3.0</button>
<button @click="setHTMLText('letterSpacing', 0)">字间距0</button>
<button @click="setHTMLText('letterSpacing', 3)">字间距3</button>
<button @click="setHTMLText('textShadow', '3px 3px 3px rgba(0, 0, 0, 0.5)')">
  Shadow
</button>
<button @click="setHTMLText('textShadow', undefined)">无Shadow</button>
<button @click="changeFontFamily">字体</button>
<button @click="setHTMLText('fontSize', 100)">大字号</button>
<button @click="reload">重置</button>

批量编辑多个对象

// 当选中多个文本对象时
if (HtmlTextManage.isMultiSelect()) {
  HtmlTextManage.dateEdit((leaf) => {
    leaf.fontSize = 18;
    leaf.fontFamily = "Inter";
    leaf.fill = "#333333";
    leaf.textAlign = "center";
  });
}

监听文本变化

const quill = HtmlTextManage.getQuill();

// 监听文本内容变化
quill.on("text-change", (delta, oldDelta, source) => {
  console.log("Text changed:", delta);
  console.log("Source:", source); // 'user' 或 'api'
});

// 监听选区变化
quill.on("selection-change", (range, oldRange, source) => {
  if (range) {
    console.log("Selection:", range.index, range.length);
  } else {
    console.log("Editor lost focus");
  }
});

// 监听编辑器变化
quill.on("editor-change", (eventName, ...args) => {
  console.log("Editor event:", eventName);
});

格式化文本

const quill = HtmlTextManage.getQuill();

// 加粗
quill.format("bold", true);

// 斜体
quill.format("italic", true);

// 下划线
quill.format("underline", true);

// 删除线
quill.format("strike", true);

// 上标
quill.format("script", "super");

// 下标
quill.format("script", "sub");

// 列表
quill.format("list", "ordered"); // 有序列表
quill.format("list", "bullet"); // 无序列表

插入内容

const quill = HtmlTextManage.getQuill();

// 插入文本
quill.insertText(0, "Hello World!");

// 插入带格式的文本
quill.insertText(0, "Hello", { bold: true, color: "red" });

// 获取文本内容
const text = quill.getText();

// 获取 HTML 内容
const html = quill.root.innerHTML;

// 设置内容
quill.setContents([
  { insert: "Hello " },
  { insert: "World", attributes: { bold: true } },
  { insert: "\n" },
]);

🔤 支持的字体

自定义字体（重要‼️）

编辑器分为内部编辑器和外部编辑器

内部编辑器的字体要在当前项目加载好

外部编辑器的字体要在下面的方式传入base64用于显示Html转成Svg内嵌的字体

import { HtmlTextManage } from "@chenyomi/leafer-htmltext-edit";

// 获取 Quill 实例
const quill = HtmlTextManage.getQuill();

const fontFamily = '"Dancing Script", cursive';
const fontBase64 = "字体的base64编码";
setHTMLText("font", fontFamily, fontBase64);

TypeScript 配置

确保 tsconfig.json 包含正确的类型定义：

{
  "compilerOptions": {
    "moduleResolution": "node",
    "esModuleInterop": true,
    "skipLibCheck": true,
    "types": ["node"]
  }
}

🔧 开发

克隆仓库

git clone https://github.com/chenyomi/leafer-htmltext-edit.git
cd leafer-htmltext-edit

安装依赖

npm install

构建

# 生产构建（混淆压缩）
npm run build


## 📝 常见问题

### Q: 如何导入 CSS 样式？

A: 插件的 CSS 会自动注入，无需手动导入。如果遇到样式问题，可以手动导入 Quill CSS：

```typescript
import "quill/dist/quill.core.css";

Q: 为什么编辑器不显示？

A: 请确保：

1. 已正确安装所有 peer dependencies
2. 调用了 HtmlTextManage.init(app) 并等待 Promise 完成
3. 创建了 Editor 实例
4. Vite/Webpack 配置中添加了 dedupe 或 alias 设置
5. 检查浏览器控制台是否有错误信息

Q: 支持哪些浏览器？

A: 支持所有现代浏览器：

• Chrome 90+
• Firefox 88+
• Safari 14+
• Edge 90+

不支持 IE11 及更早版本。

Q: 如何获取授权？

A: 请联系开发者获取商业授权密钥：

• Email: [email protected]
• TG: https://t.me/Ccymmm

1. 使用 build:watch 模式开发，避免频繁重新构建
2. 大型文档建议分段加载
3. 避免在短时间内频繁调用 dateEdit
4. 使用防抖（debounce）处理高频事件

Q: 如何处理中文输入法问题？

A: Quill 2.0 已经内置了对中文输入法的支持。如果遇到问题：

const quill = HtmlTextManage.getQuill();

// 监听输入法组合
quill.keyboard.addBinding({
  key: "Enter",
  handler: function (range, context) {
    // 自定义处理逻辑
  },
});

🤝 贡献

欢迎提交 Issue 和 Pull Request！

贡献指南

1. Fork 本仓库
2. 创建你的特性分支 (git checkout -b feature/AmazingFeature)
3. 提交你的改动 (git commit -m 'Add some AmazingFeature')
4. 推送到分支 (git push origin feature/AmazingFeature)
5. 开启一个 Pull Request

开发规范

• 遵循 TypeScript 最佳实践
• 添加必要的类型定义
• 编写清晰的注释
• 更新相关文档
• 确保所有测试通过

📄 许可证

本项目采用 MIT 许可证。

商业使用

本插件支持商业使用，但需要获取授权密钥。请联系开发者获取授权。

👤 作者

chenyomi

• npm: @chenyomi
• Email: [email protected]
• TG: https://t.me/Ccymmm

🙏 致谢

• Leafer UI - 强大的 Canvas 渲染引擎
• Quill - 现代化的富文本编辑器
• TypeScript - JavaScript 的超集
• Google Fonts - 优质的开源字体

📊 统计

如果这个项目对你有帮助，请给个 ⭐️ Star！你的支持是我们最大的动力！