Canvas-Editor 项目配置选项详解

最新推荐文章于 2025-06-10 09:00:37 发布

原创最新推荐文章于 2025-06-10 09:00:37 发布 · 390 阅读

CC 4.0 BY-SA版权

Canvas-Editor 是一个基于 Canvas 实现的富文本编辑器，提供了丰富的配置选项以满足不同场景下的编辑需求。本文将全面解析该项目的配置选项，帮助开发者更好地理解和使用这个编辑器。

编辑器通过构造函数进行初始化，接受三个参数：

import Editor from "@hufe921/canvas-editor"

new Editor(container, IEditorData | IElement[], {
  // 配置项
})

其中 container 是 DOM 容器元素，第二个参数是初始数据，第三个参数是配置对象。

编辑器模式 (mode)
- 支持多种模式：编辑、清洁、只读、表单、打印、设计模式等
- 清洁模式会隐藏视觉辅助元素（如分页符）
- 表单模式仅允许在控件内编辑
- 打印模式会隐藏辅助元素和未书写控件
默认样式设置
- defaultType: 默认元素类型（默认为 TEXT）
- defaultColor: 默认字体颜色（默认为 #000000）
- defaultFont: 默认字体（默认为 Microsoft YaHei）
- defaultSize: 默认字号（默认为 16）
- 字号范围限制：minSize（默认 5）和 maxSize（默认 72）
布局相关
- defaultBasicRowMarginHeight: 默认行高（默认为 8）
- defaultRowMargin: 默认行间距（默认为 1）
- defaultTabWidth: 默认 tab 宽度（默认为 32）
- 纸张尺寸：width（默认 794）和 height（默认 1123）
- scale: 缩放比例（默认为 1）

装饰线颜色
- underlineColor: 下划线颜色（默认为 #000000）
- strikeoutColor: 删除线颜色（默认为 #FF0000）
选区样式
- rangeColor: 选区颜色（默认为 #AECBFA）
- rangeAlpha: 选区透明度（默认为 0.6）
- rangeMinWidth: 选区最小宽度（默认为 5）
搜索高亮
- searchMatchColor: 搜索匹配颜色（默认为 #FFFF00）
- searchNavigateMatchColor: 搜索导航匹配颜色（默认为 #AAD280）
- searchMatchAlpha: 搜索高亮透明度（默认为 0.6）

图片尺寸调节器
- resizerColor: 颜色（默认为 #4182D9）
- resizerSize: 大小（默认为 5）
页边距指示器
- marginIndicatorSize: 长度（默认为 35）
- marginIndicatorColor: 颜色（默认为 #BABABA）

页边距
- margins: 页面边距（默认为 [100, 120, 100, 120]）
- pageMode: 纸张模式（连页或分页，默认为分页）
纸张方向
- paperDirection: 纵向或横向
渲染模式
- renderMode: 极速模式（多个字组合渲染）或兼容模式（逐字渲染）

页眉 (header)
- top: 距离页面顶部大小（默认为 30）
- maxHeightRadio: 占页面最大高度比（默认为 HALF）
- 可禁用或设置不可编辑
页脚 (footer)
- bottom: 距离页面底部大小（默认为 30）
- 其他配置与页眉类似
页码 (pageNumber)
- 支持自定义格式（如"第{pageNo}页/共{pageCount}页"）
- 可设置数字类型（阿拉伯数字、罗马数字等）
- 可控制起始页码和显示范围