前端UI组件富文本【免费下载链接】canvas-editorA Canvas/SVG-based rich text editor项目地址https://gitcode.com/gh_mirrors/ca/canvas-editor点击查看免费下载canvas-editor项目 README是一款基于 Canvas/SVG 渲染的富文本编辑器其控件体系文本、下拉、单选、多选、日期、数字是搭建表单型文档的核心。本文围绕官方文档 docs/guide/control/command.md 展开系统讲解instance.command上全部 13 个控件命令 API如何读取控件值、遍历全部控件以及如何增删改控件值、扩展数据、控件属性、关键词高亮、定位跳转与插入。读完本文你将能够在业务代码中完整地驱动 canvas-editor 的控件数据流并理解其底层实现链路。前置说明命令入口与调用前提所有控件命令都挂载在编辑器实例的command属性上。从源码看命令层采用门面 适配器结构Command 类 是暴露给业务方的门面其中控件相关方法在 Command.ts#L105-L126 与 Command.ts#L600-L650 定义包括executeRemoveControl、executeSetControlValue、executeSetControlValueList、executeSetControlExtension、executeSetControlExtensionList、executeSetControlProperties、executeSetControlPropertiesList、executeSetControlHighlight、executeValidate、executeLocationControl、executeInsertControl、executeJumpControl以及读取侧的getControlValue、getControlListCommandAdapt 类 是真正的实现层负责与绘制引擎Draw、范围Range、光标Cursor等内部模块协作。此外Command门面为每个executeXxx方法包了一层wrap拦截器见 Command.ts#L166-L175可通过instance.command.setInterceptor(fn)统一监听命令调用命令名 参数便于埋点或调试。所有命令均通过instance.command调用无需关心编辑器内部上下文。控件本体类型、占位符、校验、级联等配置定义见 Control.ts对应配置说明见 docs/guide/control/option.md级联与校验相关命令可参考 docs/guide/control/cascade.md 与 docs/guide/control/validate.md。获取数据getControlValue获取控件值const { value: string | null innerText: string | null zone: EditorZone elementList?: IElement[] }[] await instance.command.getControlValue(payload: IGetControlValueOption)功能按条件查询控件值返回匹配控件的数组未匹配到任何控件时返回空数组。参数说明IGetControlValueOption定义见 Control.ts#L169-L174字段类型说明idstring控件唯一 id精确匹配groupIdstring组 id匹配该组下所有控件conceptIdstring概念 id可匹配多个共享同一概念 id 的控件areaIdstring区域 id限定在指定区域Area内匹配id、conceptId、groupId三者至少提供一个否则返回空数组。返回结构value控件值的字符串形式。文本/日期/数字控件返回其输入内容下拉/多选/单选控件返回以逗号拼接的选项code未选时返回nullinnerText控件展示文本。对下拉/多选/单选控件由code对照valueSets解析出的选项文案拼接而成对文本类控件与value相同zone控件所在区域EditorZone取值如页眉HEADER、正文MAIN、页脚FOOTERelementList文本类控件的值元素列表可选。实现链路CommandAdapt.getControlValueCommandAdapt.ts#L2528-L2532直接委托给Draw.getControl().getValueById(payload)。核心逻辑见 Control.ts#L1186-L1296遍历页眉、正文、页脚三份元素列表并对表格元素递归下钻到每个单元格内部查找控件命中后对文本/日期/数字控件累计拼接VALUE组件的文本对下拉/多选/单选控件将code拆分为数组、再经valueSets反查展示文案。应用示例级联测试中的真实用法见 tests/cascade/cascadeCompute.test.ts#L62-L63const result editor.command.getControlValue({ conceptId: bmi }) const bmi result?.[0]?.value // 例如 22.9getControlList获取所有控件const controlList await instance.command.getControlList()功能返回文档中全部控件元素列表类型为IElement[]。实现链路CommandAdapt.getControlListCommandAdapt.ts#L2581-L2583委托Control.getList()Control.ts#L1684-L1721。该方法同样遍历页眉/正文/页脚并递归表格单元格收集所有带controlId的元素跳过留痕删除isElementTraceDeleted的条目剔除标题与列表上下文属性后返回。可通过每个元素的controlId、control.type、control.conceptId、control.groupId等字段做进一步过滤与统计。执行动作executeRemoveControl删除控件instance.command.executeRemoveControl(payload?: IRemoveControlOption)功能删除指定控件。参数说明IRemoveControlOption见 Control.ts#L258-L261字段类型说明idstring控件 idconceptIdstring概念 id可批量删除共享同一概念 id 的控件两种删除模式见 CommandAdapt.ts#L2209-L2270传参删除id或conceptId递归遍历页眉/正文/页脚含表格单元格删除所有匹配的控件元素并整体重渲染不传参光标删除要求当前选区为折叠态startIndex endIndex删除光标所在位置的控件并处理光标定位。底层约束Control.removeControlControl.ts#L900会校验控件deletable属性默认true见 docs/guide/control/option.md在表单模式下若全局配置modeRule.form.controlDeletableDisabled为true则禁止删除对于嵌套控件还会递归校验内部所有子控件的deletable。因此删除可能静默失败业务侧应自行判断返回或再次查询确认。executeSetControlValue设置控件值instance.command.executeSetControlValue(payload: ISetControlValueOption)功能为匹配的控件设置新值。参数说明ISetControlValueOption见 Control.ts#L183-L191字段类型说明id/groupId/conceptId/areaIdstring定位条件逻辑同getControlValuevaluestring \| IElement[] \| null新值。文本/日期/数字传字符串或富文本元素数组下拉/多选/单选传以逗号分隔的code字符串传null表示清空isSubmitHistoryboolean是否写入撤销历史默认trueisOverwriteboolean是否覆盖已有值默认true设为false时仅当控件无值才写入实现链路CommandAdapt.setControlValueCommandAdapt.ts#L2534-L2536委托Control.setValueListByIdControl.ts#L1298。其匹配策略为groupId与其他定位字段组合生效groupId必须命中且id/conceptId/areaId至少一个命中。写入时按VALUE/PLACEHOLDER组件定位选区避免带前后文本preText/postText时偏移失准isOverwritefalse时跳过已有值的控件。应用示例级联测试见 tests/cascade/cascadeCompute.test.ts#L90editor.command.executeSetControlValue({ id: cWeight, value: 90 }) editor.command.executeSetControlValue({ id: cHeight, value: null }) // 清空executeSetControlValueList批量设置控件值instance.command.executeSetControlValueList(payload: ISetControlValueOption[])功能一次调用批量设置多个控件的值参数为ISetControlValueOption[]。实现上即对数组整体调用setValueListByIdCommandAdapt.ts#L2538-L2540减少多次调用带来的重复渲染开销适合表单回填、批量初始化等场景。executeSetControlExtension设置控件扩展值instance.command.executeSetControlExtension(payload: ISetControlExtensionOption)功能写入控件的扩展数据extension类型为unknown见 Control.ts#L86。该字段不参与渲染与取值适合携带业务自定义元数据如后端字段标识、校验附加信息。参数说明ISetControlExtensionOption见 Control.ts#L193-L199在ISetControlValueOption基础上以extension: unknown取代value字段。executeSetControlExtensionList批量设置控件扩展值instance.command.executeSetControlExtensionList(payload: ISetControlExtensionOption[])功能批量写入多个控件的extension委托setExtensionListByIdCommandAdapt.ts#L2546-L2548。executeSetControlProperties设置控件属性instance.command.executeSetControlProperties(payload: ISetControlProperties)功能修改控件的展示与行为属性如placeholder、required、disabled、underline、rowFlex等。参数说明ISetControlProperties见 Control.ts#L203-L210字段类型说明id/groupId/conceptId/areaIdstring定位条件propertiesPartialOmitIControl, value需要更新的属性集合value除外isSubmitHistoryboolean是否写入撤销历史IControl的完整字段见 Control.ts#L110-L117 与 docs/guide/control/option.md涵盖通用属性与下拉/多选/单选/日期/数字的专属配置。典型用途通过required动态切换必填校验、通过disabled锁定字段、更新占位符文案等。executeSetControlPropertiesList批量设置控件属性instance.command.executeSetControlPropertiesList(payload: ISetControlProperties[])功能批量更新多个控件的属性委托setPropertiesListByIdCommandAdapt.ts#L2554-L2556适用于表单初始化的统一属性注入。executeSetControlHighlight设置控件高亮根据关键词instance.command.executeSetControlHighlight(payload: ISetControlHighlightOption)功能按关键词规则对控件值内容做高亮标记常用于搜索定位、答案标注等场景。参数说明ISetControlHighlightOption即IControlHighlight[]相关类型见 Control.ts#L55-L65// IControlHighlightRule { keyword: string // 高亮关键词必填 alpha?: number // 高亮透明度 backgroundColor?: string // 高亮背景色 } // IControlHighlight { ruleList: IControlHighlightRule[] id?: string // 限定控件 id conceptId?: string // 限定概念 id }实现链路CommandAdapt.setControlHighlightCommandAdapt.ts#L2566-L2571委托Control.setHighlightListControl.ts#L111-L113交给ControlSearch计算命中结果随后触发一次不写入撤销历史isSubmitHistory: false的重渲染命中区域按规则绘制高亮背景。executeLocationControl定位并激活控件instance.command.executeLocationControl(controlId: string, options?: ILocationControlOption)功能按控件 id 定位光标将指定控件激活可选控制光标落在控件的哪个位置。参数说明ILocationControlOption见 Control.ts#L232-L234position: LocationPosition枚举定义见 Common.ts#L20-L24取值含义BEFORE控件内部最前默认AFTER控件内部最后OUTER_BEFORE控件外面最前控件之前OUTER_AFTER控件外面最后控件之后实现链路CommandAdapt.locationControlCommandAdapt.ts#L2585-L2697从页眉、正文、页脚依次查找目标controlId同样递归表格单元格根据position结合控件的PREFIX/PRE_TEXT/PLACEHOLDER/POSTFIX/POST_TEXT等组件确定落点索引随后依次切换所在区域setZone、设置位置上下文setPositionContext、替换选区replaceRange并重渲染激活控件。对于表格内的控件会同时携带isTable: true及行列、单元格 id 等上下文。executeInsertControl插入控件instance.command.executeInsertControl(payload: IElement)功能在光标当前位置插入一个新控件。参数说明payload为控件元素IElement其中control字段按 docs/guide/control/option.md 配置控件类型与属性。实现要点见 CommandAdapt.ts#L2699-L2727只读readonly或禁用disabled状态下插入会被直接忽略内部会deepClone入参并依据光标锚点元素克隆表格、行、列表、区域等上下文属性保证插入后控件的布局上下文正确嵌套限制仅允许TEXT类型控件作为外层嵌套其他控件在非文本控件内部尝试插入新的CONTROL元素会被拒绝避免形成非法嵌套结构。executeJumpControl跳转到下/上一个控件instance.command.executeJumpControl(payload?: { direction?: MoveDirection })功能将光标跳转到下一个或上一个控件常用于键盘导航、表单流程推进如填写完一项自动跳到下一项。参数说明direction为MoveDirection枚举定义见 Observer.ts#L1-L6UP top、DOWN down、LEFT left、RIGHT right。未传时默认向下DOWN。实现链路CommandAdapt.jumpControlCommandAdapt.ts#L2729-L2733委托Control.initNextControlControl.ts#L1962-L1986方向为UP时查找上一个控件上下文否则查找下一个找到后设置位置上下文、替换选区折叠到目标索引并重渲染同时将光标落到目标控件上。命令 API 速查表命令功能入参类型getControlValue获取控件值IGetControlValueOptiongetControlList获取所有控件无executeRemoveControl删除控件IRemoveControlOption可省略executeSetControlValue设置控件值ISetControlValueOptionexecuteSetControlValueList批量设置控件值ISetControlValueOption[]executeSetControlExtension设置扩展值ISetControlExtensionOptionexecuteSetControlExtensionList批量设置扩展值ISetControlExtensionOption[]executeSetControlProperties设置控件属性ISetControlPropertiesexecuteSetControlPropertiesList批量设置控件属性ISetControlProperties[]executeSetControlHighlight关键词高亮IControlHighlight[]executeLocationControl定位并激活控件controlId: stringILocationControlOption?executeInsertControl插入控件IElementexecuteJumpControl跳转上/下一个控件{ direction?: MoveDirection }实践小结读取链路getControlValue/getControlList底层统一遍历页眉、正文、页脚并递归表格单元格因此页面任意区域的控件都能被查询到value与innerText的差异code vs 展示文案在联调下拉/多选/单选时需特别注意。写入链路所有executeSetControl*命令共享定位条件组合匹配逻辑groupId与其他字段组合命中并支持isSubmitHistory控制是否入撤销栈、isOverwrite控制是否覆盖已有值。导航链路executeLocationControl负责精确定位激活executeJumpControl负责顺序跳转两者配合可完整实现表单逐项填写的交互闭环。约束兜底删除受deletable与表单模式配置约束插入受只读/禁用状态与嵌套规则约束业务接入时应做好失败分支处理相关配置字段可进一步查阅 docs/guide/control/option.md、docs/guide/control/cascade.md 与 docs/guide/control/validate.md。赞分享前端UI组件富文本【免费下载链接】canvas-editorA Canvas/SVG-based rich text editor项目地址https://gitcode.com/gh_mirrors/ca/canvas-editor点击查看免费下载相关推荐Front-End-Checklist 实战在生产环境集成实时错误监控Sentry Next.js App RouterFront End Checklist 实战在生产环境集成实时错误监控Sentry Next.js App Router 本文以 Front End前端UI组件富文本canvas-editor 数据获取命令完全指南instance.command 全部 get 方法详解与源码级解析canvas editor 数据获取命令完全指南instance.command 全部 get 方法详解与源码级解析 导读 canvas editor 是一个前端UI组件富文本Canvas-Editor 项目数据获取命令详解Canvas Editor 项目数据获取命令详解 前言 Canvas Editor 是一个基于 Canvas 实现的富文本编辑器提供了丰富的 API 用于文档前端UI组件富文本上一篇AERIS-10 开源相控阵雷达入门教程2个版本参数对比 4步搭建路径下一篇探索新纪元Docker Register Cloud - 开源界的云端存储新星创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考