@chenyomi/leafer-htmltext-edit 2.0.2 → 2.1.2

package/README.md

@@ -7,15 +7,19 @@
   <img src="https://img.shields.io/badge/TypeScript-Ready-blue.svg" alt="TypeScript">
 </p>
 
-一个强大的 Leafer UI 富文本编辑器插件，支持 HTML 文本编辑和丰富的文本样式控制。
+一个强大的 Leafer UI 富文本编辑器插件，集成 Quill 2.0，支持 HTML 文本编辑和丰富的文本样式控制。
+
+[English](./README_EN.md) | 简体中文
 
 ## ✨ 特性
 
-- 🔤 **多语言字体** - 支持自定义字体
+- 🎨 **富文本编辑** - 基于 Quill 2.0，支持完整的富文本编辑功能
+- 🔤 **多语言字体** - 内置 20+ 种字体，支持中文、日文、韩文等多语言
 - 📐 **文本样式** - 字体、大小、颜色、对齐、行高、字间距等全面控制
 - 📝 **格式化工具** - 加粗、斜体、下划线、删除线、上下标
 - 📋 **列表支持** - 有序列表、无序列表
 - 🎯 **完美集成** - 无缝集成到 Leafer UI 生态系统
+- 🔐 **授权管理** - 内置授权系统，支持商业使用
 - 📦 **轻量级** - 代码混淆压缩，体积小，加载快
 - 🔧 **TypeScript** - 完整的类型定义支持
 - 🚀 **现代化构建** - ESM + CJS 双格式，支持 Tree Shaking
@@ -41,7 +45,7 @@ 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
 ```
 
 ## 🚀 快速开始
@@ -60,10 +64,10 @@ const app = new App({
   editor: {}
 })
 
-// 2. 初始化 Quill 编辑器
+// 2. 初始化编辑器
 await HtmlTextManage.init(app)
 
-// 3. 创建编辑器
+// 3. 创建编辑器实例
 const editor = new Editor({ app })
 
 // 现在可以在画布上编辑文本了！
@@ -126,22 +130,55 @@ function TextEditor() {
 }
 ```
 
+### 在 Angular 中使用
+
+```typescript
+import { Component, ElementRef, ViewChild, AfterViewInit } from '@angular/core'
+import { App } from 'leafer-ui'
+import { Editor } from '@leafer-in/editor'
+import { HtmlTextManage } from '@chenyomi/leafer-htmltext-edit'
+
+@Component({
+  selector: 'app-text-editor',
+  template: '<div #canvas style="width: 100vw; height: 100vh;"></div>'
+})
+export class TextEditorComponent implements AfterViewInit {
+  @ViewChild('canvas') canvasRef!: ElementRef
+
+  async ngAfterViewInit() {
+    const app = new App({
+      view: this.canvasRef.nativeElement,
+      tree: {},
+      editor: {}
+    })
+
+    await HtmlTextManage.init(app)
+    new Editor({ app })
+  }
+}
+```
+
 ## 📚 API 文档
 
 ### HtmlTextManage
 
-单例模式的 Quill 编辑器管理器。
+单例模式的编辑器管理器，负责管理 Quill 实例和文本编辑。
 
-#### 方法
+#### 静态方法
 
 ##### `init(app: any): Promise<Quill>`
 
-初始化 Quill 编辑器。
+初始化 Quill 编辑器并绑定到 Leafer 应用。
 
 ```typescript
 const quill = await HtmlTextManage.init(app)
 ```
 
+**参数:**
+- `app` - Leafer App 实例
+
+**返回:** Promise<Quill> - Quill 编辑器实例
+
 ##### `getQuill(): Quill`
 
 获取 Quill 实例。
@@ -150,6 +187,8 @@ const quill = await HtmlTextManage.init(app)
 const quill = HtmlTextManage.getQuill()
 ```
 
+**返回:** Quill - Quill 编辑器实例
+
 ##### `getCanvas(): any`
 
 获取 Leafer App 实例。
@@ -158,9 +197,11 @@ const quill = HtmlTextManage.getQuill()
 const app = HtmlTextManage.getCanvas()
 ```
 
+**返回:** App - Leafer 应用实例
+
 ##### `isMultiSelect(): boolean`
 
-判断是否为多选状态。
+判断是否为多选状态（选中了多个对象）。
 
 ```typescript
 if (HtmlTextManage.isMultiSelect()) {
@@ -168,6 +209,8 @@ if (HtmlTextManage.isMultiSelect()) {
 }
 ```
 
+**返回:** boolean - 是否多选
+
 ##### `dateEdit(callback: (leaf: any) => void, level?: number, listNew?: any): void`
 
 批量编辑选中的对象。
@@ -179,26 +222,97 @@ HtmlTextManage.dateEdit((leaf) => {
 })
 ```
 
-### TextEditor
+**参数:**
+- `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')
+}
+```
+
+**参数:**
+- `licenseKey` - 授权密钥字符串
+
+**返回:** boolean - 是否成功激活
+
+#### `checkLicense(): boolean`
+
+检查授权状态。
+
+```typescript
+import { checkLicense } from '@chenyomi/leafer-htmltext-edit'
+
+if (checkLicense()) {
+  console.log('License is valid')
+} else {
+  console.log('License is invalid or expired')
+}
+```
+
+**返回:** boolean - 授权是否有效
 
-文本编辑器类，继承自 `InnerEditor`。
+#### `getLicenseInfo(): LicenseData | null`
+
+获取授权信息。
 
 ```typescript
-import { TextEditor } from '@chenyomi/leafer-htmltext-edit'
+import { getLicenseInfo } from '@chenyomi/leafer-htmltext-edit'
 
-// TextEditor 会自动注册到 Leafer Editor 中
-// 无需手动实例化
+const info = getLicenseInfo()
+if (info) {
+  console.log('License holder:', info.name)
+  console.log('Expires at:', info.expirationDate)
+}
 ```
 
-### TextEditTool
+**返回:** LicenseData | null - 授权信息对象或 null
+
+### HtmlText
 
-文本编辑工具类。
+自定义的 HTML 文本类，扩展自 Leafer 的文本对象。
 
 ```typescript
-import { TextEditTool } from '@chenyomi/leafer-htmltext-edit'
+import { HtmlText } from '@chenyomi/leafer-htmltext-edit'
 
-// 使用编辑工具
-const tool = new TextEditTool()
+// 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'
+
+// 设置字体大小
+setHTMLText('fontSize', 24, null, editor, false)
 ```
 
 ## 🎨 使用示例
@@ -230,6 +344,16 @@ HtmlTextManage.dateEdit((leaf) => {
 HtmlTextManage.dateEdit((leaf) => {
   leaf.textAlign = 'center' // 'left' | 'center' | 'right' | 'justify'
 })
+
+// 设置行高
+HtmlTextManage.dateEdit((leaf) => {
+  leaf.lineHeight = 1.5
+})
+
+// 设置字间距
+HtmlTextManage.dateEdit((leaf) => {
+  leaf.letterSpacing = 2
+})
 ```
 
 ### 批量编辑多个对象
@@ -241,6 +365,7 @@ if (HtmlTextManage.isMultiSelect()) {
     leaf.fontSize = 18
     leaf.fontFamily = 'Inter'
     leaf.fill = '#333333'
+    leaf.textAlign = 'center'
   })
 }
 ```
@@ -250,20 +375,83 @@ if (HtmlTextManage.isMultiSelect()) {
 ```typescript
 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)
+})
+```
+
+### 格式化文本
+
+```typescript
+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')   // 无序列表
+```
+
+### 插入内容
+
+```typescript
+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' }
+])
 ```
 
 ## 🔤 支持的字体
 
-插件内置以下字体支持：
+插件内置以下字体支持，所有字体通过 Google Fonts CDN 加载：
 
 ### 西文字体
 - **Roboto** - Google 设计的现代无衬线字体
@@ -285,14 +473,41 @@ quill.on('selection-change', (range, oldRange, source) => {
 - **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** - 思源黑体韩文
+- **Noto Sans SC** - 思源黑体简体中文
+- **Noto Serif SC** - 思源宋体简体中文
+- **Noto Sans TC** - 思源黑体繁体中文
+- **Noto Sans HK** - 思源黑体香港
+- **Noto Serif TC** - 思源宋体繁体中文
+- **Noto Serif HK** - 思源宋体香港
+- **Noto Sans JP** - 思源黑体日文
+- **Noto Sans KR** - 思源黑体韩文
+
+### 自定义字体
+
+```typescript
+import { HtmlTextManage } from '@chenyomi/leafer-htmltext-edit'
+
+// 获取 Quill 实例
+const quill = HtmlTextManage.getQuill()
+
+// 注册自定义字体
+const Font = quill.constructor.import('formats/font')
+Font.whitelist = [...Font.whitelist, 'CustomFont']
+quill.constructor.register(Font, true)
+
+// 在 CSS 中定义字体
+const style = document.createElement('style')
+style.textContent = `
+  @font-face {
+    font-family: 'CustomFont';
+    src: url('/fonts/custom-font.woff2') format('woff2');
+  }
+  .ql-font-CustomFont {
+    font-family: 'CustomFont', sans-serif;
+  }
+`
+document.head.appendChild(style)
+```
 
 ## ⚙️ 高级配置
 
@@ -322,19 +537,68 @@ export default defineConfig({
 })
 ```
 
+### 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')
+    }
+  }
+}
+```
+
 ### 自定义样式
 
-如果需要自定义编辑器样式，可以覆盖 CSS 变量：
+如果需要自定义编辑器样式，可以覆盖 CSS：
 
 ```css
-/* 覆盖编辑器样式 */
+/* 覆盖编辑器容器样式 */
 #textInnerEditor {
-  /* 自定义样式 */
+  border: 2px solid #e0e0e0;
+  border-radius: 4px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 }
 
-/* Quill 编辑器样式 */
+/* 覆盖 Quill 编辑器样式 */
 .ql-editor {
-  /* 自定义样式 */
+  font-family: 'Inter', sans-serif;
+  font-size: 16px;
+  line-height: 1.6;
+}
+
+/* 占位符样式 */
+.ql-editor.ql-blank::before {
+  color: #999;
+  content: attr(data-placeholder);
+}
+
+/* 工具栏样式 */
+.ql-toolbar {
+  background: #f5f5f5;
+  border-bottom: 1px solid #e0e0e0;
+}
+```
+
+### TypeScript 配置
+
+确保 `tsconfig.json` 包含正确的类型定义：
+
+```json
+{
+  "compilerOptions": {
+    "moduleResolution": "node",
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "types": ["node"]
+  }
 }
 ```
 
@@ -343,8 +607,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
 ```
 
 ### 安装依赖
@@ -362,7 +626,7 @@ npm run build
 # 开发构建（不混淆）
 npm run build:dev
 
-# 监听模式
+# 监听模式（开发时使用）
 npm run build:watch
 ```
 
@@ -376,6 +640,21 @@ npm link
 npm link @chenyomi/leafer-htmltext-edit
 ```
 
+### 发布到 npm
+
+```bash
+# 1. 更新版本号
+npm version patch  # 1.0.0 -> 1.0.1
+npm version minor  # 1.0.0 -> 1.1.0
+npm version major  # 1.0.0 -> 2.0.0
+
+# 2. 构建
+npm run build
+
+# 3. 发布
+npm publish
+```
+
 ## 📝 常见问题
 
 ### Q: 如何导入 CSS 样式？
@@ -390,13 +669,20 @@ import 'quill/dist/quill.core.css'
 
 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: 支持所有现代浏览器：
+- Chrome 90+
+- Firefox 88+
+- Safari 14+
+- Edge 90+
+
+不支持 IE11 及更早版本。
 
 ### Q: 如何自定义字体？
 
@@ -404,48 +690,109 @@ A: 可以通过修改 Quill 的字体配置：
 
 ```typescript
 const quill = HtmlTextManage.getQuill()
-const Font = quill.constructor.import('attributors/class/font')
-Font.whitelist = ['CustomFont1', 'CustomFont2']
+const Font = quill.constructor.import('formats/font')
+Font.whitelist = [...Font.whitelist, 'MyFont1', 'MyFont2']
 quill.constructor.register(Font, true)
 ```
 
+然后在 CSS 中定义字体样式。
+
 ### Q: 文本编辑器的位置不对？
 
-A: 这通常是由于画布缩放导致的。编辑器会自动处理缩放，如果仍有问题，请检查 CSS transform。
+A: 这通常是由于画布缩放导致的。编辑器会自动处理缩放，如果仍有问题：
+1. 检查 CSS transform 设置
+2. 确保父容器没有 position: relative 之外的定位
+3. 检查 z-index 层级
+
+### Q: 如何获取授权？
+
+A: 请联系开发者获取商业授权密钥：
+- Email: chenyomi@example.com
+- GitHub: [@chenyomi](https://github.com/chenyomi)
+
+### Q: 性能优化建议？
+
+A: 
+1. 使用 `build:watch` 模式开发，避免频繁重新构建
+2. 大型文档建议分段加载
+3. 避免在短时间内频繁调用 `dateEdit`
+4. 使用防抖（debounce）处理高频事件
+
+### Q: 如何处理中文输入法问题？
+
+A: Quill 2.0 已经内置了对中文输入法的支持。如果遇到问题：
+
+```typescript
+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](./LICENSE) 许可证。
 
+### 商业使用
+
+本插件支持商业使用，但需要获取授权密钥。请联系开发者获取授权。
+
 ## 👤 作者
 
 **chenyomi**
 
-- GitHub: [@chenyomi](https://github.com/yourusername)
+- GitHub: [@chenyomi](https://github.com/chenyomi)
 - npm: [@chenyomi](https://www.npmjs.com/~chenyomi)
+- Email: chenyomi@example.com
 
 ## 🙏 致谢
 
 - [Leafer UI](https://www.leaferjs.com/) - 强大的 Canvas 渲染引擎
 - [Quill](https://quilljs.com/) - 现代化的富文本编辑器
 - [TypeScript](https://www.typescriptlang.org/) - JavaScript 的超集
+- [Google Fonts](https://fonts.google.com/) - 优质的开源字体
+
+## 🔗 相关链接
+
+- [在线演示](https://chenyomi.github.io/leafer-htmltext-edit-demo)
+- [完整文档](https://chenyomi.github.io/leafer-htmltext-edit)
+- [更新日志](./CHANGELOG.md)
+- [快速开始](./QUICKSTART.md)
+- [问题反馈](https://github.com/chenyomi/leafer-htmltext-edit/issues)
 
 ## 📊 统计
 
-![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！你的支持是我们最大的动力！