@chenyomi/leafer-htmltext-edit 2.1.2 → 2.1.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +199 -376
  2. package/package.json +1 -1
package/README.md CHANGED
@@ -9,21 +9,23 @@
9
9
 
10
10
  一个强大的 Leafer UI 富文本编辑器插件,集成 Quill 2.0,支持 HTML 文本编辑和丰富的文本样式控制。
11
11
 
12
- [English](./README_EN.md) | 简体中文
13
-
14
12
  ## ✨ 特性
15
13
 
16
14
  - 🎨 **富文本编辑** - 基于 Quill 2.0,支持完整的富文本编辑功能
17
- - 🔤 **多语言字体** - 内置 20+ 种字体,支持中文、日文、韩文等多语言
15
+ - 🔤 **多语言字体** - 支持自定义字体
18
16
  - 📐 **文本样式** - 字体、大小、颜色、对齐、行高、字间距等全面控制
19
17
  - 📝 **格式化工具** - 加粗、斜体、下划线、删除线、上下标
20
18
  - 📋 **列表支持** - 有序列表、无序列表
21
19
  - 🎯 **完美集成** - 无缝集成到 Leafer UI 生态系统
22
- - 🔐 **授权管理** - 内置授权系统,支持商业使用
20
+ - 🔐 **授权管理** - 内置授权系统,本地开发不限制,上线有授权检测,需要联系作者
23
21
  - 📦 **轻量级** - 代码混淆压缩,体积小,加载快
24
22
  - 🔧 **TypeScript** - 完整的类型定义支持
25
23
  - 🚀 **现代化构建** - ESM + CJS 双格式,支持 Tree Shaking
26
24
 
25
+ - [插件官网](https://chenyomi.github.io/leafer-htmltext-edit-website/)
26
+ - [在线演示](https://chenyomi.github.io/leafer-htmltext-edit-view/)
27
+ - [问题反馈](https://github.com/chenyomi/npm-chenyomi-leafer-htmltext-edit/issues)
28
+
27
29
  ## 📦 安装
28
30
 
29
31
  ```bash
@@ -50,112 +52,113 @@ npm install leafer-ui @leafer-ui/core @leafer-in/editor @leafer-in/html quill
50
52
 
51
53
  ## 🚀 快速开始
52
54
 
53
- ### 基本使用
55
+ ### Vite 项目配置
54
56
 
55
- ```typescript
56
- import { App } from 'leafer-ui'
57
- import { Editor } from '@leafer-in/editor'
58
- import { HtmlTextManage } from '@chenyomi/leafer-htmltext-edit'
57
+ 为了确保插件正常工作,建议在 Vite 配置中添加以下设置:
59
58
 
60
- // 1. 创建 Leafer 应用
61
- const app = new App({
62
- view: window,
63
- tree: {},
64
- editor: {}
65
- })
59
+ ```typescript
60
+ // vite.config.ts
61
+ import { defineConfig } from "vite";
66
62
 
67
- // 2. 初始化编辑器
68
- await HtmlTextManage.init(app)
63
+ export default defineConfig({
64
+ resolve: {
65
+ // 确保使用项目的依赖实例
66
+ dedupe: [
67
+ "@leafer-ui/core",
68
+ "@leafer-in/editor",
69
+ "@leafer-in/html",
70
+ "leafer-ui",
71
+ "quill",
72
+ ],
73
+ },
74
+ optimizeDeps: {
75
+ // 排除插件的预构建
76
+ exclude: ["@chenyomi/leafer-htmltext-edit"],
77
+ },
78
+ });
79
+ ```
69
80
 
70
- // 3. 创建编辑器实例
71
- const editor = new Editor({ app })
81
+ ### Webpack 项目配置
72
82
 
73
- // 现在可以在画布上编辑文本了!
83
+ ```javascript
84
+ // webpack.config.js
85
+ module.exports = {
86
+ resolve: {
87
+ // 确保使用单一实例
88
+ alias: {
89
+ quill: require.resolve("quill"),
90
+ "@leafer-ui/core": require.resolve("@leafer-ui/core"),
91
+ "@leafer-in/editor": require.resolve("@leafer-in/editor"),
92
+ "@leafer-in/html": require.resolve("@leafer-in/html"),
93
+ "leafer-ui": require.resolve("leafer-ui"),
94
+ },
95
+ },
96
+ };
74
97
  ```
75
98
 
99
+
76
100
  ### 在 Vue 3 中使用
77
101
 
78
102
  ```vue
79
103
  <template>
80
- <div ref="canvasRef" style="width: 100vw; height: 100vh;"></div>
104
+ <div id="leafer-view" style="width: 100vw; height: 100vh;"></div>
81
105
  </template>
82
106
 
83
107
  <script setup lang="ts">
84
- import { ref, onMounted } from 'vue'
85
- import { App } from 'leafer-ui'
86
- import { Editor } from '@leafer-in/editor'
87
- import { HtmlTextManage } from '@chenyomi/leafer-htmltext-edit'
88
-
89
- const canvasRef = ref<HTMLDivElement>()
90
-
91
- onMounted(async () => {
92
- const app = new App({
93
- view: canvasRef.value,
94
- tree: {},
95
- editor: {}
96
- })
97
-
98
- await HtmlTextManage.init(app)
99
- new Editor({ app })
100
- })
108
+ import { onMounted } from "vue";
109
+ import { App } from "leafer-ui";
110
+ import "leafer-editor";
111
+ import {
112
+ htmlTextManage,
113
+ setLicense,
114
+ setHTMLText,
115
+ HtmlText,
116
+ } from "@chenyomi/leafer-htmltext-edit";
117
+ // 1. 设置 License(必须在 init 之前)
118
+ const licenseKey = "授权请联系作者";
119
+ const success = setLicense(licenseKey);
120
+
121
+ if (!success) {
122
+ console.error("License validation failed");
123
+ // 可以显示错误提示给用户
124
+ }
125
+ onMounted(() => {
126
+ const leafer = new App({
127
+ view: "leafer-view",
128
+ fill: "#ffffff",
129
+ editor: {},
130
+ });
131
+ htmlTextManage.init(leafer);
132
+ let { width = 1200, height = 960 } = leafer;
133
+ const text_ = new HtmlText({
134
+ editOuter: "TextEditTool",
135
+ name: "Text",
136
+ x: width / 2 - 100,
137
+ y: height * 0.4,
138
+ editable: true,
139
+ draggable: true,
140
+ fontFamily: undefined,
141
+ fontSize: 30,
142
+ lineHeight: 1.5,
143
+ letterSpacing: 0,
144
+ textShadow: undefined,
145
+ alignContent: "start",
146
+ });
147
+ leafer.tree.add([text_]);
148
+ });
101
149
  </script>
102
150
  ```
103
151
 
104
152
  ### 在 React 中使用
105
153
 
106
154
  ```tsx
107
- import { useEffect, useRef } from 'react'
108
- import { App } from 'leafer-ui'
109
- import { Editor } from '@leafer-in/editor'
110
- import { HtmlTextManage } from '@chenyomi/leafer-htmltext-edit'
111
-
112
- function TextEditor() {
113
- const canvasRef = useRef<HTMLDivElement>(null)
114
-
115
- useEffect(() => {
116
- if (!canvasRef.current) return
117
-
118
- const app = new App({
119
- view: canvasRef.current,
120
- tree: {},
121
- editor: {}
122
- })
123
-
124
- HtmlTextManage.init(app).then(() => {
125
- new Editor({ app })
126
- })
127
- }, [])
128
-
129
- return <div ref={canvasRef} style={{ width: '100vw', height: '100vh' }} />
130
- }
155
+ // 参考vue3 示例 懒得写demo了
131
156
  ```
132
157
 
133
158
  ### 在 Angular 中使用
134
159
 
135
160
  ```typescript
136
- import { Component, ElementRef, ViewChild, AfterViewInit } from '@angular/core'
137
- import { App } from 'leafer-ui'
138
- import { Editor } from '@leafer-in/editor'
139
- import { HtmlTextManage } from '@chenyomi/leafer-htmltext-edit'
140
-
141
- @Component({
142
- selector: 'app-text-editor',
143
- template: '<div #canvas style="width: 100vw; height: 100vh;"></div>'
144
- })
145
- export class TextEditorComponent implements AfterViewInit {
146
- @ViewChild('canvas') canvasRef!: ElementRef
147
-
148
- async ngAfterViewInit() {
149
- const app = new App({
150
- view: this.canvasRef.nativeElement,
151
- tree: {},
152
- editor: {}
153
- })
154
-
155
- await HtmlTextManage.init(app)
156
- new Editor({ app })
157
- }
158
- }
161
+ // 参考vue3 示例 懒得写demo了
159
162
  ```
160
163
 
161
164
  ## 📚 API 文档
@@ -171,10 +174,11 @@ export class TextEditorComponent implements AfterViewInit {
171
174
  初始化 Quill 编辑器并绑定到 Leafer 应用。
172
175
 
173
176
  ```typescript
174
- const quill = await HtmlTextManage.init(app)
177
+ const quill = await HtmlTextManage.init(app);
175
178
  ```
176
179
 
177
180
  **参数:**
181
+
178
182
  - `app` - Leafer App 实例
179
183
 
180
184
  **返回:** Promise<Quill> - Quill 编辑器实例
@@ -184,7 +188,7 @@ const quill = await HtmlTextManage.init(app)
184
188
  获取 Quill 实例。
185
189
 
186
190
  ```typescript
187
- const quill = HtmlTextManage.getQuill()
191
+ const quill = HtmlTextManage.getQuill();
188
192
  ```
189
193
 
190
194
  **返回:** Quill - Quill 编辑器实例
@@ -194,7 +198,7 @@ const quill = HtmlTextManage.getQuill()
194
198
  获取 Leafer App 实例。
195
199
 
196
200
  ```typescript
197
- const app = HtmlTextManage.getCanvas()
201
+ const app = HtmlTextManage.getCanvas();
198
202
  ```
199
203
 
200
204
  **返回:** App - Leafer 应用实例
@@ -205,7 +209,7 @@ const app = HtmlTextManage.getCanvas()
205
209
 
206
210
  ```typescript
207
211
  if (HtmlTextManage.isMultiSelect()) {
208
- console.log('Multiple objects selected')
212
+ console.log("Multiple objects selected");
209
213
  }
210
214
  ```
211
215
 
@@ -217,12 +221,13 @@ if (HtmlTextManage.isMultiSelect()) {
217
221
 
218
222
  ```typescript
219
223
  HtmlTextManage.dateEdit((leaf) => {
220
- leaf.fontSize = 20
221
- leaf.fill = '#ff0000'
222
- })
224
+ leaf.fontSize = 20;
225
+ leaf.fill = "#ff0000";
226
+ });
223
227
  ```
224
228
 
225
229
  **参数:**
230
+
226
231
  - `callback` - 编辑回调函数,接收每个选中的对象
227
232
  - `level?` - 可选,编辑层级
228
233
  - `listNew?` - 可选,新对象列表
@@ -236,15 +241,16 @@ HtmlTextManage.dateEdit((leaf) => {
236
241
  设置授权密钥。
237
242
 
238
243
  ```typescript
239
- import { setLicense } from '@chenyomi/leafer-htmltext-edit'
244
+ import { setLicense } from "@chenyomi/leafer-htmltext-edit";
240
245
 
241
- const success = setLicense('your-license-key')
246
+ const success = setLicense("your-license-key");
242
247
  if (success) {
243
- console.log('License activated successfully')
248
+ console.log("License activated successfully");
244
249
  }
245
250
  ```
246
251
 
247
252
  **参数:**
253
+
248
254
  - `licenseKey` - 授权密钥字符串
249
255
 
250
256
  **返回:** boolean - 是否成功激活
@@ -254,12 +260,12 @@ if (success) {
254
260
  检查授权状态。
255
261
 
256
262
  ```typescript
257
- import { checkLicense } from '@chenyomi/leafer-htmltext-edit'
263
+ import { checkLicense } from "@chenyomi/leafer-htmltext-edit";
258
264
 
259
265
  if (checkLicense()) {
260
- console.log('License is valid')
266
+ console.log("License is valid");
261
267
  } else {
262
- console.log('License is invalid or expired')
268
+ console.log("License is invalid or expired");
263
269
  }
264
270
  ```
265
271
 
@@ -270,12 +276,12 @@ if (checkLicense()) {
270
276
  获取授权信息。
271
277
 
272
278
  ```typescript
273
- import { getLicenseInfo } from '@chenyomi/leafer-htmltext-edit'
279
+ import { getLicenseInfo } from "@chenyomi/leafer-htmltext-edit";
274
280
 
275
- const info = getLicenseInfo()
281
+ const info = getLicenseInfo();
276
282
  if (info) {
277
- console.log('License holder:', info.name)
278
- console.log('Expires at:', info.expirationDate)
283
+ console.log("License holder:", info.name);
284
+ console.log("Expires at:", info.expirationDate);
279
285
  }
280
286
  ```
281
287
 
@@ -286,7 +292,7 @@ if (info) {
286
292
  自定义的 HTML 文本类,扩展自 Leafer 的文本对象。
287
293
 
288
294
  ```typescript
289
- import { HtmlText } from '@chenyomi/leafer-htmltext-edit'
295
+ import { HtmlText } from "@chenyomi/leafer-htmltext-edit";
290
296
 
291
297
  // HtmlText 会自动注册到 Leafer 中
292
298
  // 可以直接在 Leafer 中使用
@@ -299,9 +305,9 @@ import { HtmlText } from '@chenyomi/leafer-htmltext-edit'
299
305
  更新 HTML 文本对象。
300
306
 
301
307
  ```typescript
302
- import { updataHtmlText } from '@chenyomi/leafer-htmltext-edit'
308
+ import { updataHtmlText } from "@chenyomi/leafer-htmltext-edit";
303
309
 
304
- updataHtmlText(textObject)
310
+ updataHtmlText(textObject);
305
311
  ```
306
312
 
307
313
  #### `setHTMLText(type: string, value: any, inner: any, editor: any, multi: boolean): void`
@@ -309,10 +315,10 @@ updataHtmlText(textObject)
309
315
  设置 HTML 文本属性。
310
316
 
311
317
  ```typescript
312
- import { setHTMLText } from '@chenyomi/leafer-htmltext-edit'
318
+ import { setHTMLText } from "@chenyomi/leafer-htmltext-edit";
313
319
 
314
320
  // 设置字体大小
315
- setHTMLText('fontSize', 24, null, editor, false)
321
+ setHTMLText("fontSize", 24, null, editor, false);
316
322
  ```
317
323
 
318
324
  ## 🎨 使用示例
@@ -320,40 +326,37 @@ setHTMLText('fontSize', 24, null, editor, false)
320
326
  ### 设置文本样式
321
327
 
322
328
  ```typescript
323
- import { HtmlTextManage } from '@chenyomi/leafer-htmltext-edit'
324
-
325
- // 获取 Quill 实例
326
- const quill = HtmlTextManage.getQuill()
327
-
328
- // 设置字体大小
329
- HtmlTextManage.dateEdit((leaf) => {
330
- leaf.fontSize = 24
331
- })
332
-
333
- // 设置字体
334
- HtmlTextManage.dateEdit((leaf) => {
335
- leaf.fontFamily = 'Roboto'
336
- })
337
-
338
- // 设置颜色
339
- HtmlTextManage.dateEdit((leaf) => {
340
- leaf.fill = '#ff0000'
341
- })
342
-
343
- // 设置对齐方式
344
- HtmlTextManage.dateEdit((leaf) => {
345
- leaf.textAlign = 'center' // 'left' | 'center' | 'right' | 'justify'
346
- })
347
-
348
- // 设置行高
349
- HtmlTextManage.dateEdit((leaf) => {
350
- leaf.lineHeight = 1.5
351
- })
352
-
353
- // 设置字间距
354
- HtmlTextManage.dateEdit((leaf) => {
355
- leaf.letterSpacing = 2
356
- })
329
+ import { setHTMLText } from "@chenyomi/leafer-htmltext-edit";
330
+ ```
331
+ ```html
332
+ <button @click="setHTMLText('bold')">加粗</button>
333
+ <button @click="setHTMLText('italic')">斜体</button>
334
+ <button @click="setHTMLText('underline')">下划线</button>
335
+ <button @click="setHTMLText('strike')">删除线</button>
336
+ <button @click="setHTMLText('textCase')">大小写</button>
337
+ <button @click="setHTMLText('script', 'super')">上标</button>
338
+ <button @click="setHTMLText('script', 'sub')">下标</button>
339
+ <button @click="setHTMLText('align', false)">左对齐</button>
340
+ <button @click="setHTMLText('align', 'center')">居中对齐</button>
341
+ <button @click="setHTMLText('align', 'right')">右对齐</button>
342
+ <button @click="setHTMLText('alignContent', 'start')">顶部对齐</button>
343
+ <button @click="setHTMLText('alignContent', 'center')">垂直居中</button>
344
+ <button @click="setHTMLText('alignContent', 'end')">底部对齐</button>
345
+ <button @click="setHTMLText('list', 'ordered')">有序列表</button>
346
+ <button @click="setHTMLText('list', 'bullet')">无序列表</button>
347
+ <button @click="setHTMLText('color', '#3CB72C')">#3CB72C</button>
348
+ <button @click="setHTMLText('color', '#000000')">#000000</button>
349
+ <button @click="setHTMLText('lineHeight', 1.5)">行高1.5</button>
350
+ <button @click="setHTMLText('lineHeight', 3)">行高3.0</button>
351
+ <button @click="setHTMLText('letterSpacing', 0)">字间距0</button>
352
+ <button @click="setHTMLText('letterSpacing', 3)">字间距3</button>
353
+ <button @click="setHTMLText('textShadow', '3px 3px 3px rgba(0, 0, 0, 0.5)')">
354
+ Shadow
355
+ </button>
356
+ <button @click="setHTMLText('textShadow', undefined)">无Shadow</button>
357
+ <button @click="changeFontFamily">字体</button>
358
+ <button @click="setHTMLText('fontSize', 100)">大字号</button>
359
+ <button @click="reload">重置</button>
357
360
  ```
358
361
 
359
362
  ### 批量编辑多个对象
@@ -362,230 +365,111 @@ HtmlTextManage.dateEdit((leaf) => {
362
365
  // 当选中多个文本对象时
363
366
  if (HtmlTextManage.isMultiSelect()) {
364
367
  HtmlTextManage.dateEdit((leaf) => {
365
- leaf.fontSize = 18
366
- leaf.fontFamily = 'Inter'
367
- leaf.fill = '#333333'
368
- leaf.textAlign = 'center'
369
- })
368
+ leaf.fontSize = 18;
369
+ leaf.fontFamily = "Inter";
370
+ leaf.fill = "#333333";
371
+ leaf.textAlign = "center";
372
+ });
370
373
  }
371
374
  ```
372
375
 
373
376
  ### 监听文本变化
374
377
 
375
378
  ```typescript
376
- const quill = HtmlTextManage.getQuill()
379
+ const quill = HtmlTextManage.getQuill();
377
380
 
378
381
  // 监听文本内容变化
379
- quill.on('text-change', (delta, oldDelta, source) => {
380
- console.log('Text changed:', delta)
381
- console.log('Source:', source) // 'user' 或 'api'
382
- })
382
+ quill.on("text-change", (delta, oldDelta, source) => {
383
+ console.log("Text changed:", delta);
384
+ console.log("Source:", source); // 'user' 或 'api'
385
+ });
383
386
 
384
387
  // 监听选区变化
385
- quill.on('selection-change', (range, oldRange, source) => {
388
+ quill.on("selection-change", (range, oldRange, source) => {
386
389
  if (range) {
387
- console.log('Selection:', range.index, range.length)
390
+ console.log("Selection:", range.index, range.length);
388
391
  } else {
389
- console.log('Editor lost focus')
392
+ console.log("Editor lost focus");
390
393
  }
391
- })
394
+ });
392
395
 
393
396
  // 监听编辑器变化
394
- quill.on('editor-change', (eventName, ...args) => {
395
- console.log('Editor event:', eventName)
396
- })
397
+ quill.on("editor-change", (eventName, ...args) => {
398
+ console.log("Editor event:", eventName);
399
+ });
397
400
  ```
398
401
 
399
402
  ### 格式化文本
400
403
 
401
404
  ```typescript
402
- const quill = HtmlTextManage.getQuill()
405
+ const quill = HtmlTextManage.getQuill();
403
406
 
404
407
  // 加粗
405
- quill.format('bold', true)
408
+ quill.format("bold", true);
406
409
 
407
410
  // 斜体
408
- quill.format('italic', true)
411
+ quill.format("italic", true);
409
412
 
410
413
  // 下划线
411
- quill.format('underline', true)
414
+ quill.format("underline", true);
412
415
 
413
416
  // 删除线
414
- quill.format('strike', true)
417
+ quill.format("strike", true);
415
418
 
416
419
  // 上标
417
- quill.format('script', 'super')
420
+ quill.format("script", "super");
418
421
 
419
422
  // 下标
420
- quill.format('script', 'sub')
423
+ quill.format("script", "sub");
421
424
 
422
425
  // 列表
423
- quill.format('list', 'ordered') // 有序列表
424
- quill.format('list', 'bullet') // 无序列表
426
+ quill.format("list", "ordered"); // 有序列表
427
+ quill.format("list", "bullet"); // 无序列表
425
428
  ```
426
429
 
427
430
  ### 插入内容
428
431
 
429
432
  ```typescript
430
- const quill = HtmlTextManage.getQuill()
433
+ const quill = HtmlTextManage.getQuill();
431
434
 
432
435
  // 插入文本
433
- quill.insertText(0, 'Hello World!')
436
+ quill.insertText(0, "Hello World!");
434
437
 
435
438
  // 插入带格式的文本
436
- quill.insertText(0, 'Hello', { bold: true, color: 'red' })
439
+ quill.insertText(0, "Hello", { bold: true, color: "red" });
437
440
 
438
441
  // 获取文本内容
439
- const text = quill.getText()
442
+ const text = quill.getText();
440
443
 
441
444
  // 获取 HTML 内容
442
- const html = quill.root.innerHTML
445
+ const html = quill.root.innerHTML;
443
446
 
444
447
  // 设置内容
445
448
  quill.setContents([
446
- { insert: 'Hello ' },
447
- { insert: 'World', attributes: { bold: true } },
448
- { insert: '\n' }
449
- ])
449
+ { insert: "Hello " },
450
+ { insert: "World", attributes: { bold: true } },
451
+ { insert: "\n" },
452
+ ]);
450
453
  ```
451
454
 
452
455
  ## 🔤 支持的字体
453
456
 
454
- 插件内置以下字体支持,所有字体通过 Google Fonts CDN 加载:
455
-
456
- ### 西文字体
457
- - **Roboto** - Google 设计的现代无衬线字体
458
- - **Roboto Mono** - 等宽字体
459
- - **Inter** - 现代 UI 字体
460
- - **Open Sans** - 清晰易读
461
- - **Montserrat** - 几何无衬线
462
- - **Lato** - 人文主义无衬线
463
- - **Poppins** - 几何无衬线
464
- - **Arimo** - 无衬线字体
465
-
466
- ### 衬线字体
467
- - **Merriweather** - 可读性强的衬线字体
468
- - **Playfair Display** - 优雅的显示字体
469
- - **Noto Serif** - Google Noto 衬线
470
- - **Spectral** - 现代衬线字体
471
-
472
- ### 手写字体
473
- - **Dancing Script** - 手写风格
474
-
475
- ### 中日韩字体
476
- - **Noto Sans SC** - 思源黑体简体中文
477
- - **Noto Serif SC** - 思源宋体简体中文
478
- - **Noto Sans TC** - 思源黑体繁体中文
479
- - **Noto Sans HK** - 思源黑体香港
480
- - **Noto Serif TC** - 思源宋体繁体中文
481
- - **Noto Serif HK** - 思源宋体香港
482
- - **Noto Sans JP** - 思源黑体日文
483
- - **Noto Sans KR** - 思源黑体韩文
484
-
485
- ### 自定义字体
486
-
457
+ ### 自定义字体(重要‼️)
458
+ ### 编辑器分为内部编辑器和外部编辑器
459
+ ### 内部编辑器的字体要在当前项目加载好
460
+ ### 外部编辑器的字体要在下面的方式传入base64用于显示Html转成Svg内嵌的字体
487
461
  ```typescript
488
- import { HtmlTextManage } from '@chenyomi/leafer-htmltext-edit'
462
+ import { HtmlTextManage } from "@chenyomi/leafer-htmltext-edit";
489
463
 
490
464
  // 获取 Quill 实例
491
- const quill = HtmlTextManage.getQuill()
492
-
493
- // 注册自定义字体
494
- const Font = quill.constructor.import('formats/font')
495
- Font.whitelist = [...Font.whitelist, 'CustomFont']
496
- quill.constructor.register(Font, true)
497
-
498
- // 在 CSS 中定义字体
499
- const style = document.createElement('style')
500
- style.textContent = `
501
- @font-face {
502
- font-family: 'CustomFont';
503
- src: url('/fonts/custom-font.woff2') format('woff2');
504
- }
505
- .ql-font-CustomFont {
506
- font-family: 'CustomFont', sans-serif;
507
- }
508
- `
509
- document.head.appendChild(style)
510
- ```
465
+ const quill = HtmlTextManage.getQuill();
511
466
 
512
- ## ⚙️ 高级配置
513
-
514
- ### Vite 项目配置
467
+ const fontFamily = '"Dancing Script", cursive';
468
+ const fontBase64 = "字体的base64编码"
469
+ setHTMLText("font", fontFamily, fontBase64);
515
470
 
516
- 为了确保插件正常工作,建议在 Vite 配置中添加以下设置:
517
-
518
- ```typescript
519
- // vite.config.ts
520
- import { defineConfig } from 'vite'
521
-
522
- export default defineConfig({
523
- resolve: {
524
- // 确保使用项目的依赖实例
525
- dedupe: [
526
- '@leafer-ui/core',
527
- '@leafer-in/editor',
528
- '@leafer-in/html',
529
- 'leafer-ui',
530
- 'quill'
531
- ]
532
- },
533
- optimizeDeps: {
534
- // 排除插件的预构建
535
- exclude: ['@chenyomi/leafer-htmltext-edit']
536
- }
537
- })
538
- ```
539
-
540
- ### Webpack 项目配置
541
-
542
- ```javascript
543
- // webpack.config.js
544
- module.exports = {
545
- resolve: {
546
- // 确保使用单一实例
547
- alias: {
548
- 'quill': require.resolve('quill'),
549
- '@leafer-ui/core': require.resolve('@leafer-ui/core'),
550
- '@leafer-in/editor': require.resolve('@leafer-in/editor'),
551
- '@leafer-in/html': require.resolve('@leafer-in/html'),
552
- 'leafer-ui': require.resolve('leafer-ui')
553
- }
554
- }
555
- }
556
471
  ```
557
472
 
558
- ### 自定义样式
559
-
560
- 如果需要自定义编辑器样式,可以覆盖 CSS:
561
-
562
- ```css
563
- /* 覆盖编辑器容器样式 */
564
- #textInnerEditor {
565
- border: 2px solid #e0e0e0;
566
- border-radius: 4px;
567
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
568
- }
569
-
570
- /* 覆盖 Quill 编辑器样式 */
571
- .ql-editor {
572
- font-family: 'Inter', sans-serif;
573
- font-size: 16px;
574
- line-height: 1.6;
575
- }
576
-
577
- /* 占位符样式 */
578
- .ql-editor.ql-blank::before {
579
- color: #999;
580
- content: attr(data-placeholder);
581
- }
582
-
583
- /* 工具栏样式 */
584
- .ql-toolbar {
585
- background: #f5f5f5;
586
- border-bottom: 1px solid #e0e0e0;
587
- }
588
- ```
589
473
 
590
474
  ### TypeScript 配置
591
475
 
@@ -623,37 +507,6 @@ npm install
623
507
  # 生产构建(混淆压缩)
624
508
  npm run build
625
509
 
626
- # 开发构建(不混淆)
627
- npm run build:dev
628
-
629
- # 监听模式(开发时使用)
630
- npm run build:watch
631
- ```
632
-
633
- ### 本地测试
634
-
635
- ```bash
636
- # 在插件目录
637
- npm link
638
-
639
- # 在你的项目目录
640
- npm link @chenyomi/leafer-htmltext-edit
641
- ```
642
-
643
- ### 发布到 npm
644
-
645
- ```bash
646
- # 1. 更新版本号
647
- npm version patch # 1.0.0 -> 1.0.1
648
- npm version minor # 1.0.0 -> 1.1.0
649
- npm version major # 1.0.0 -> 2.0.0
650
-
651
- # 2. 构建
652
- npm run build
653
-
654
- # 3. 发布
655
- npm publish
656
- ```
657
510
 
658
511
  ## 📝 常见问题
659
512
 
@@ -662,12 +515,13 @@ npm publish
662
515
  A: 插件的 CSS 会自动注入,无需手动导入。如果遇到样式问题,可以手动导入 Quill CSS:
663
516
 
664
517
  ```typescript
665
- import 'quill/dist/quill.core.css'
518
+ import "quill/dist/quill.core.css";
666
519
  ```
667
520
 
668
521
  ### Q: 为什么编辑器不显示?
669
522
 
670
523
  A: 请确保:
524
+
671
525
  1. 已正确安装所有 peer dependencies
672
526
  2. 调用了 `HtmlTextManage.init(app)` 并等待 Promise 完成
673
527
  3. 创建了 `Editor` 实例
@@ -677,6 +531,7 @@ A: 请确保:
677
531
  ### Q: 支持哪些浏览器?
678
532
 
679
533
  A: 支持所有现代浏览器:
534
+
680
535
  - Chrome 90+
681
536
  - Firefox 88+
682
537
  - Safari 14+
@@ -684,35 +539,12 @@ A: 支持所有现代浏览器:
684
539
 
685
540
  不支持 IE11 及更早版本。
686
541
 
687
- ### Q: 如何自定义字体?
688
-
689
- A: 可以通过修改 Quill 的字体配置:
690
-
691
- ```typescript
692
- const quill = HtmlTextManage.getQuill()
693
- const Font = quill.constructor.import('formats/font')
694
- Font.whitelist = [...Font.whitelist, 'MyFont1', 'MyFont2']
695
- quill.constructor.register(Font, true)
696
- ```
697
-
698
- 然后在 CSS 中定义字体样式。
699
-
700
- ### Q: 文本编辑器的位置不对?
701
-
702
- A: 这通常是由于画布缩放导致的。编辑器会自动处理缩放,如果仍有问题:
703
- 1. 检查 CSS transform 设置
704
- 2. 确保父容器没有 position: relative 之外的定位
705
- 3. 检查 z-index 层级
706
-
707
542
  ### Q: 如何获取授权?
708
543
 
709
544
  A: 请联系开发者获取商业授权密钥:
710
- - Email: chenyomi@example.com
711
- - GitHub: [@chenyomi](https://github.com/chenyomi)
712
545
 
713
- ### Q: 性能优化建议?
546
+ - Email: 408550179@qq.com
714
547
 
715
- A:
716
548
  1. 使用 `build:watch` 模式开发,避免频繁重新构建
717
549
  2. 大型文档建议分段加载
718
550
  3. 避免在短时间内频繁调用 `dateEdit`
@@ -723,15 +555,15 @@ A:
723
555
  A: Quill 2.0 已经内置了对中文输入法的支持。如果遇到问题:
724
556
 
725
557
  ```typescript
726
- const quill = HtmlTextManage.getQuill()
558
+ const quill = HtmlTextManage.getQuill();
727
559
 
728
560
  // 监听输入法组合
729
561
  quill.keyboard.addBinding({
730
- key: 'Enter',
731
- handler: function(range, context) {
562
+ key: "Enter",
563
+ handler: function (range, context) {
732
564
  // 自定义处理逻辑
733
- }
734
- })
565
+ },
566
+ });
735
567
  ```
736
568
 
737
569
  ## 🤝 贡献
@@ -766,9 +598,8 @@ quill.keyboard.addBinding({
766
598
 
767
599
  **chenyomi**
768
600
 
769
- - GitHub: [@chenyomi](https://github.com/chenyomi)
770
601
  - npm: [@chenyomi](https://www.npmjs.com/~chenyomi)
771
- - Email: chenyomi@example.com
602
+ - Email: 408550179@qq.com
772
603
 
773
604
  ## 🙏 致谢
774
605
 
@@ -777,14 +608,6 @@ quill.keyboard.addBinding({
777
608
  - [TypeScript](https://www.typescriptlang.org/) - JavaScript 的超集
778
609
  - [Google Fonts](https://fonts.google.com/) - 优质的开源字体
779
610
 
780
- ## 🔗 相关链接
781
-
782
- - [在线演示](https://chenyomi.github.io/leafer-htmltext-edit-demo)
783
- - [完整文档](https://chenyomi.github.io/leafer-htmltext-edit)
784
- - [更新日志](./CHANGELOG.md)
785
- - [快速开始](./QUICKSTART.md)
786
- - [问题反馈](https://github.com/chenyomi/leafer-htmltext-edit/issues)
787
-
788
611
  ## 📊 统计
789
612
 
790
613
  ![npm version](https://img.shields.io/npm/v/@chenyomi/leafer-htmltext-edit)
@@ -795,4 +618,4 @@ quill.keyboard.addBinding({
795
618
 
796
619
  ---
797
620
 
798
- 如果这个项目对你有帮助,请给个 ⭐️ Star!你的支持是我们最大的动力!
621
+ 如果这个项目对你有帮助,请给个 ⭐️ Star!你的支持是我们最大的动力!
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@chenyomi/leafer-htmltext-edit",
3
- "version": "2.1.2",
3
+ "version": "2.1.3",
4
4
  "description": "A text editor plugin for Leafer UI with HTML text support",
5
5
  "main": "dist/index.cjs",
6
6
  "module": "dist/index.mjs",