@chenyomi/leafer-htmltext-edit 2.0.3 → 2.1.3

package/README.md

@@ -7,19 +7,25 @@
   <img src="https://img.shields.io/badge/TypeScript-Ready-blue.svg" alt="TypeScript">
 </p>
 
-一个强大的 Leafer UI 富文本编辑器插件，支持 HTML 文本编辑和丰富的文本样式控制。
+一个强大的 Leafer UI 富文本编辑器插件，集成 Quill 2.0，支持 HTML 文本编辑和丰富的文本样式控制。
 
 ## ✨ 特性
 
+- 🎨 **富文本编辑** - 基于 Quill 2.0，支持完整的富文本编辑功能
 - 🔤 **多语言字体** - 支持自定义字体
 - 📐 **文本样式** - 字体、大小、颜色、对齐、行高、字间距等全面控制
 - 📝 **格式化工具** - 加粗、斜体、下划线、删除线、上下标
 - 📋 **列表支持** - 有序列表、无序列表
 - 🎯 **完美集成** - 无缝集成到 Leafer UI 生态系统
+- 🔐 **授权管理** - 内置授权系统，本地开发不限制，上线有授权检测，需要联系作者
 - 📦 **轻量级** - 代码混淆压缩，体积小，加载快
 - 🔧 **TypeScript** - 完整的类型定义支持
 - 🚀 **现代化构建** - ESM + CJS 双格式，支持 Tree Shaking
 
+- [插件官网](https://chenyomi.github.io/leafer-htmltext-edit-website/)
+- [在线演示](https://chenyomi.github.io/leafer-htmltext-edit-view/)
+- [问题反馈](https://github.com/chenyomi/npm-chenyomi-leafer-htmltext-edit/issues)
+
 ## 📦 安装
 
 ```bash
@@ -41,195 +47,316 @@ yarn add @chenyomi/leafer-htmltext-edit
 本插件需要以下依赖（请确保已安装）：
 
 ```bash
-npm install leafer-ui @leafer-ui/core @leafer-in/editor @leafer-in/html
+npm install leafer-ui @leafer-ui/core @leafer-in/editor @leafer-in/html quill
 ```
 
 ## 🚀 快速开始
 
-### 基本使用
+### Vite 项目配置
 
-```typescript
-import { App } from 'leafer-ui'
-import { Editor } from '@leafer-in/editor'
-import { HtmlTextManage } from '@chenyomi/leafer-htmltext-edit'
+为了确保插件正常工作，建议在 Vite 配置中添加以下设置：
 
-// 1. 创建 Leafer 应用
-const app = new App({
-  view: window,
-  tree: {},
-  editor: {}
-})
+```typescript
+// vite.config.ts
+import { defineConfig } from "vite";
 
-// 2. 初始化 Quill 编辑器
-await HtmlTextManage.init(app)
+export default defineConfig({
+  resolve: {
+    // 确保使用项目的依赖实例
+    dedupe: [
+      "@leafer-ui/core",
+      "@leafer-in/editor",
+      "@leafer-in/html",
+      "leafer-ui",
+      "quill",
+    ],
+  },
+  optimizeDeps: {
+    // 排除插件的预构建
+    exclude: ["@chenyomi/leafer-htmltext-edit"],
+  },
+});
+```
 
-// 3. 创建编辑器
-const editor = new Editor({ app })
+### Webpack 项目配置
 
-// 现在可以在画布上编辑文本了！
+```javascript
+// 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 中使用
 
 ```vue
 <template>
-  <div ref="canvasRef" style="width: 100vw; height: 100vh;"></div>
+  <div id="leafer-view" style="width: 100vw; height: 100vh;"></div>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
-import { App } from 'leafer-ui'
-import { Editor } from '@leafer-in/editor'
-import { HtmlTextManage } from '@chenyomi/leafer-htmltext-edit'
-
-const canvasRef = ref<HTMLDivElement>()
-
-onMounted(async () => {
-  const app = new App({
-    view: canvasRef.value,
-    tree: {},
-    editor: {}
-  })
-
-  await HtmlTextManage.init(app)
-  new Editor({ app })
-})
+import { onMounted } from "vue";
+import { App } from "leafer-ui";
+import "leafer-editor";
+import {
+  htmlTextManage,
+  setLicense,
+  setHTMLText,
+  HtmlText,
+} from "@chenyomi/leafer-htmltext-edit";
+// 1. 设置 License（必须在 init 之前）
+const licenseKey = "授权请联系作者";
+const success = setLicense(licenseKey);
+
+if (!success) {
+  console.error("License validation failed");
+  // 可以显示错误提示给用户
+}
+onMounted(() => {
+  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 中使用
 
 ```tsx
-import { useEffect, useRef } from 'react'
-import { App } from 'leafer-ui'
-import { Editor } from '@leafer-in/editor'
-import { HtmlTextManage } from '@chenyomi/leafer-htmltext-edit'
-
-function TextEditor() {
-  const canvasRef = useRef<HTMLDivElement>(null)
-
-  useEffect(() => {
-    if (!canvasRef.current) return
-
-    const app = new App({
-      view: canvasRef.current,
-      tree: {},
-      editor: {}
-    })
+// 参考vue3 示例 懒得写demo了
+```
 
-    HtmlTextManage.init(app).then(() => {
-      new Editor({ app })
-    })
-  }, [])
+### 在 Angular 中使用
 
-  return <div ref={canvasRef} style={{ width: '100vw', height: '100vh' }} />
-}
+```typescript
+// 参考vue3 示例 懒得写demo了
 ```
 
 ## 📚 API 文档
 
 ### HtmlTextManage
 
-单例模式的 Quill 编辑器管理器。
+单例模式的编辑器管理器，负责管理 Quill 实例和文本编辑。
 
-#### 方法
+#### 静态方法
 
 ##### `init(app: any): Promise<Quill>`
 
-初始化 Quill 编辑器。
+初始化 Quill 编辑器并绑定到 Leafer 应用。
 
 ```typescript
-const quill = await HtmlTextManage.init(app)
+const quill = await HtmlTextManage.init(app);
 ```
 
+**参数:**
+
+- `app` - Leafer App 实例
+
+**返回:** Promise<Quill> - Quill 编辑器实例
+
 ##### `getQuill(): Quill`
 
 获取 Quill 实例。
 
 ```typescript
-const quill = HtmlTextManage.getQuill()
+const quill = HtmlTextManage.getQuill();
 ```
 
+**返回:** Quill - Quill 编辑器实例
+
 ##### `getCanvas(): any`
 
 获取 Leafer App 实例。
 
 ```typescript
-const app = HtmlTextManage.getCanvas()
+const app = HtmlTextManage.getCanvas();
 ```
 
+**返回:** App - Leafer 应用实例
+
 ##### `isMultiSelect(): boolean`
 
-判断是否为多选状态。
+判断是否为多选状态（选中了多个对象）。
 
 ```typescript
 if (HtmlTextManage.isMultiSelect()) {
-  console.log('Multiple objects selected')
+  console.log("Multiple objects selected");
 }
 ```
 
+**返回:** boolean - 是否多选
+
 ##### `dateEdit(callback: (leaf: any) => void, level?: number, listNew?: any): void`
 
 批量编辑选中的对象。
 
 ```typescript
 HtmlTextManage.dateEdit((leaf) => {
-  leaf.fontSize = 20
-  leaf.fill = '#ff0000'
-})
+  leaf.fontSize = 20;
+  leaf.fill = "#ff0000";
+});
+```
+
+**参数:**
+
+- `callback` - 编辑回调函数，接收每个选中的对象
+- `level?` - 可选，编辑层级
+- `listNew?` - 可选，新对象列表
+
+### 授权管理
+
+插件内置授权系统，支持商业使用。
+
+#### `setLicense(licenseKey: string): boolean`
+
+设置授权密钥。
+
+```typescript
+import { setLicense } from "@chenyomi/leafer-htmltext-edit";
+
+const success = setLicense("your-license-key");
+if (success) {
+  console.log("License activated successfully");
+}
 ```
 
-### TextEditor
+**参数:**
 
-文本编辑器类，继承自 `InnerEditor`。
+- `licenseKey` - 授权密钥字符串
+
+**返回:** boolean - 是否成功激活
+
+#### `checkLicense(): boolean`
+
+检查授权状态。
 
 ```typescript
-import { TextEditor } from '@chenyomi/leafer-htmltext-edit'
+import { checkLicense } from "@chenyomi/leafer-htmltext-edit";
 
-// TextEditor 会自动注册到 Leafer Editor 中
-// 无需手动实例化
+if (checkLicense()) {
+  console.log("License is valid");
+} else {
+  console.log("License is invalid or expired");
+}
 ```
 
-### TextEditTool
+**返回:** boolean - 授权是否有效
 
-文本编辑工具类。
+#### `getLicenseInfo(): LicenseData | null`
+
+获取授权信息。
 
 ```typescript
-import { TextEditTool } from '@chenyomi/leafer-htmltext-edit'
+import { getLicenseInfo } from "@chenyomi/leafer-htmltext-edit";
 
-// 使用编辑工具
-const tool = new TextEditTool()
+const info = getLicenseInfo();
+if (info) {
+  console.log("License holder:", info.name);
+  console.log("Expires at:", info.expirationDate);
+}
 ```
 
-## 🎨 使用示例
+**返回:** LicenseData | null - 授权信息对象或 null
 
-### 设置文本样式
+### HtmlText
+
+自定义的 HTML 文本类，扩展自 Leafer 的文本对象。
 
 ```typescript
-import { HtmlTextManage } from '@chenyomi/leafer-htmltext-edit'
+import { HtmlText } from "@chenyomi/leafer-htmltext-edit";
 
-// 获取 Quill 实例
-const quill = HtmlTextManage.getQuill()
+// HtmlText 会自动注册到 Leafer 中
+// 可以直接在 Leafer 中使用
+```
+
+### 工具函数
+
+#### `updataHtmlText(obj: any): void`
+
+更新 HTML 文本对象。
+
+```typescript
+import { updataHtmlText } from "@chenyomi/leafer-htmltext-edit";
+
+updataHtmlText(textObject);
+```
+
+#### `setHTMLText(type: string, value: any, inner: any, editor: any, multi: boolean): void`
+
+设置 HTML 文本属性。
+
+```typescript
+import { setHTMLText } from "@chenyomi/leafer-htmltext-edit";
 
 // 设置字体大小
-HtmlTextManage.dateEdit((leaf) => {
-  leaf.fontSize = 24
-})
+setHTMLText("fontSize", 24, null, editor, false);
+```
 
-// 设置字体
-HtmlTextManage.dateEdit((leaf) => {
-  leaf.fontFamily = 'Roboto'
-})
+## 🎨 使用示例
 
-// 设置颜色
-HtmlTextManage.dateEdit((leaf) => {
-  leaf.fill = '#ff0000'
-})
+### 设置文本样式
 
-// 设置对齐方式
-HtmlTextManage.dateEdit((leaf) => {
-  leaf.textAlign = 'center' // 'left' | 'center' | 'right' | 'justify'
-})
+```typescript
+import { setHTMLText } from "@chenyomi/leafer-htmltext-edit";
+```
+```html
+<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>
 ```
 
 ### 批量编辑多个对象
@@ -238,103 +365,124 @@ HtmlTextManage.dateEdit((leaf) => {
 // 当选中多个文本对象时
 if (HtmlTextManage.isMultiSelect()) {
   HtmlTextManage.dateEdit((leaf) => {
-    leaf.fontSize = 18
-    leaf.fontFamily = 'Inter'
-    leaf.fill = '#333333'
-  })
+    leaf.fontSize = 18;
+    leaf.fontFamily = "Inter";
+    leaf.fill = "#333333";
+    leaf.textAlign = "center";
+  });
 }
 ```
 
 ### 监听文本变化
 
 ```typescript
-const quill = HtmlTextManage.getQuill()
+const quill = HtmlTextManage.getQuill();
 
-quill.on('text-change', (delta, oldDelta, source) => {
-  console.log('Text changed:', delta)
-})
+// 监听文本内容变化
+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) => {
+// 监听选区变化
+quill.on("selection-change", (range, oldRange, source) => {
   if (range) {
-    console.log('Selection:', range.index, range.length)
+    console.log("Selection:", range.index, range.length);
+  } else {
+    console.log("Editor lost focus");
   }
-})
+});
+
+// 监听编辑器变化
+quill.on("editor-change", (eventName, ...args) => {
+  console.log("Editor event:", eventName);
+});
 ```
 
-## 🔤 支持的字体
+### 格式化文本
 
-插件内置以下字体支持：
-
-### 西文字体
-- **Roboto** - Google 设计的现代无衬线字体
-- **Roboto Mono** - 等宽字体
-- **Inter** - 现代 UI 字体
-- **Open Sans** - 清晰易读
-- **Montserrat** - 几何无衬线
-- **Lato** - 人文主义无衬线
-- **Poppins** - 几何无衬线
-- **Arimo** - 无衬线字体
-
-### 衬线字体
-- **Merriweather** - 可读性强的衬线字体
-- **Playfair Display** - 优雅的显示字体
-- **Noto Serif** - Google Noto 衬线
-- **Spectral** - 现代衬线字体
-
-### 手写字体
-- **Dancing Script** - 手写风格
-
-### 中日韩字体
-- **Noto Sans Simplified Chinese** - 思源黑体简体
-- **Noto Serif Simplified Chinese** - 思源宋体简体
-- **Noto Sans Traditional Chinese** - 思源黑体繁体
-- **Noto Sans Hong Kong** - 思源黑体香港
-- **Noto Serif Traditional Chinese** - 思源宋体繁体
-- **Noto Serif Hong Kong** - 思源宋体香港
-- **Noto Sans Japanese** - 思源黑体日文
-- **Noto Sans Korean** - 思源黑体韩文
-
-## ⚙️ 高级配置
+```typescript
+const quill = HtmlTextManage.getQuill();
 
-### Vite 项目配置
+// 加粗
+quill.format("bold", true);
 
-为了确保插件正常工作，建议在 Vite 配置中添加以下设置：
+// 斜体
+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"); // 无序列表
+```
+
+### 插入内容
 
 ```typescript
-// vite.config.ts
-import { defineConfig } from 'vite'
+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内嵌的字体
+```typescript
+import { HtmlTextManage } from "@chenyomi/leafer-htmltext-edit";
+
+// 获取 Quill 实例
+const quill = HtmlTextManage.getQuill();
+
+const fontFamily = '"Dancing Script", cursive';
+const fontBase64 = "字体的base64编码"
+setHTMLText("font", fontFamily, fontBase64);
 
-export default defineConfig({
-  resolve: {
-    // 确保使用项目的依赖实例
-    dedupe: [
-      '@leafer-ui/core',
-      '@leafer-in/editor',
-      '@leafer-in/html',
-      'leafer-ui',
-      'quill'
-    ]
-  },
-  optimizeDeps: {
-    // 排除插件的预构建
-    exclude: ['@chenyomi/leafer-htmltext-edit']
-  }
-})
 ```
 
-### 自定义样式
 
-如果需要自定义编辑器样式，可以覆盖 CSS 变量：
+### TypeScript 配置
 
-```css
-/* 覆盖编辑器样式 */
-#textInnerEditor {
-  /* 自定义样式 */
-}
+确保 `tsconfig.json` 包含正确的类型定义：
 
-/* Quill 编辑器样式 */
-.ql-editor {
-  /* 自定义样式 */
+```json
+{
+  "compilerOptions": {
+    "moduleResolution": "node",
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "types": ["node"]
+  }
 }
 ```
 
@@ -343,8 +491,8 @@ export default defineConfig({
 ### 克隆仓库
 
 ```bash
-git clone https://github.com/yourusername/leafer-htmltext-editor.git
-cd leafer-htmltext-editor
+git clone https://github.com/chenyomi/leafer-htmltext-edit.git
+cd leafer-htmltext-edit
 ```
 
 ### 安装依赖
@@ -359,22 +507,6 @@ npm install
 # 生产构建（混淆压缩）
 npm run build
 
-# 开发构建（不混淆）
-npm run build:dev
-
-# 监听模式
-npm run build:watch
-```
-
-### 本地测试
-
-```bash
-# 在插件目录
-npm link
-
-# 在你的项目目录
-npm link @chenyomi/leafer-htmltext-edit
-```
 
 ## 📝 常见问题
 
@@ -383,69 +515,107 @@ npm link @chenyomi/leafer-htmltext-edit
 A: 插件的 CSS 会自动注入，无需手动导入。如果遇到样式问题，可以手动导入 Quill CSS：
 
 ```typescript
-import 'quill/dist/quill.core.css'
+import "quill/dist/quill.core.css";
 ```
 
 ### Q: 为什么编辑器不显示？
 
 A: 请确保：
+
 1. 已正确安装所有 peer dependencies
-2. 调用了 `HtmlTextManage.init(app)`
+2. 调用了 `HtmlTextManage.init(app)` 并等待 Promise 完成
 3. 创建了 `Editor` 实例
-4. Vite 配置中添加了 `dedupe` 设置
+4. Vite/Webpack 配置中添加了 `dedupe` 或 `alias` 设置
+5. 检查浏览器控制台是否有错误信息
 
 ### Q: 支持哪些浏览器？
 
-A: 支持所有现代浏览器（Chrome, Firefox, Safari, Edge）。不支持 IE11。
+A: 支持所有现代浏览器：
 
-### Q: 如何自定义字体？
+- Chrome 90+
+- Firefox 88+
+- Safari 14+
+- Edge 90+
 
-A: 可以通过修改 Quill 的字体配置：
+不支持 IE11 及更早版本。
 
-```typescript
-const quill = HtmlTextManage.getQuill()
-const Font = quill.constructor.import('attributors/class/font')
-Font.whitelist = ['CustomFont1', 'CustomFont2']
-quill.constructor.register(Font, true)
-```
+### Q: 如何获取授权？
+
+A: 请联系开发者获取商业授权密钥：
+
+- Email: 408550179@qq.com
+
+1. 使用 `build:watch` 模式开发，避免频繁重新构建
+2. 大型文档建议分段加载
+3. 避免在短时间内频繁调用 `dateEdit`
+4. 使用防抖（debounce）处理高频事件
+
+### Q: 如何处理中文输入法问题？
+
+A: Quill 2.0 已经内置了对中文输入法的支持。如果遇到问题：
 
-### Q: 文本编辑器的位置不对？
+```typescript
+const quill = HtmlTextManage.getQuill();
 
-A: 这通常是由于画布缩放导致的。编辑器会自动处理缩放，如果仍有问题，请检查 CSS transform。
+// 监听输入法组合
+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](./LICENSE) 许可证。
 
+### 商业使用
+
+本插件支持商业使用，但需要获取授权密钥。请联系开发者获取授权。
+
 ## 👤 作者
 
 **chenyomi**
 
-- GitHub: [@chenyomi](https://github.com/yourusername)
 - npm: [@chenyomi](https://www.npmjs.com/~chenyomi)
+- Email: 408550179@qq.com
 
 ## 🙏 致谢
 
 - [Leafer UI](https://www.leaferjs.com/) - 强大的 Canvas 渲染引擎
 - [Quill](https://quilljs.com/) - 现代化的富文本编辑器
 - [TypeScript](https://www.typescriptlang.org/) - JavaScript 的超集
+- [Google Fonts](https://fonts.google.com/) - 优质的开源字体
 
 ## 📊 统计
 
-![npm](https://img.shields.io/npm/v/@chenyomi/leafer-htmltext-edit)
-![npm bundle size](https://img.shields.io/bundlephobia/minzip/@chenyomi/leafer-htmltext-edit)
-![npm](https://img.shields.io/npm/dt/@chenyomi/leafer-htmltext-edit)
+![npm version](https://img.shields.io/npm/v/@chenyomi/leafer-htmltext-edit)
+![npm downloads](https://img.shields.io/npm/dt/@chenyomi/leafer-htmltext-edit)
+![bundle size](https://img.shields.io/bundlephobia/minzip/@chenyomi/leafer-htmltext-edit)
+![license](https://img.shields.io/npm/l/@chenyomi/leafer-htmltext-edit)
+![stars](https://img.shields.io/github/stars/chenyomi/leafer-htmltext-edit)
 
 ---
 
-如果这个项目对你有帮助，请给个 ⭐️ Star！
+如果这个项目对你有帮助，请给个 ⭐️ Star！你的支持是我们最大的动力！