Canvas-Editor 项目数据获取命令详解

Canvas-Editor 项目数据获取命令详解

canvas-editor rich text editor by canvas/svg 项目地址: https://gitcode.com/gh_mirrors/ca/canvas-editor

前言

Canvas-Editor 是一个基于 Canvas 实现的富文本编辑器，提供了丰富的 API 用于文档内容的获取和操作。本文将详细介绍该编辑器提供的各类数据获取命令，帮助开发者更好地理解和使用这些功能。

基础数据获取

获取文档信息

编辑器提供了两种方式获取当前文档的完整信息：

1. 同步获取 - getValue()

   const { version, data, options } = instance.command.getValue();
   

   返回包含文档版本、数据和配置的完整对象

2. 异步获取 - `getValueAsync()**

   const { version, data, options } = await instance.command.getValueAsync();
   

   异步版本适用于大数据量文档的场景

获取编辑器配置

const editorOption = await instance.command.getOptions();

返回当前编辑器的所有配置项，包括页面大小、边距等设置

内容相关获取

获取文档内容

1. HTML格式

   const { header, main, footer } = await instance.command.getHTML();
   

   返回文档分区的HTML字符串

2. 纯文本格式

   const { header, main, footer } = await instance.command.getText();
   

   返回文档分区的纯文本内容

3. 目录结构

   const catalog = await instance.command.getCatalog();
   

   返回文档的目录结构，便于实现导航功能

获取特定内容

1. 文档字数统计

   const wordCount = await instance.command.getWordCount();
   

   返回文档的总字数

2. 页面图片

   const base64StringList = await instance.command.getImage();
   

   返回当前页面所有图片的base64编码数组

选区与光标操作

选区信息获取

1. 当前选区

   const range = instance.command.getRange();
   

   返回当前选区的范围信息

2. 选区文本

   const rangeText = instance.command.getRangeText();
   

   返回当前选中的文本内容

3. 选区上下文

   const rangeContext = instance.command.getRangeContext();
   

   返回选区周围的上下文信息

光标位置

const range = instance.command.getCursorPosition();

返回当前光标的位置坐标信息

高级功能

关键词处理

1. 关键词选区

   const rangeList = instance.command.getKeywordRangeList();
   

   返回文档中所有关键词的选区列表

2. 关键词上下文

   const keywordContextList = instance.command.getKeywordContext(payload);
   

   返回指定关键词的上下文信息

控件操作

1. 获取所有控件

   const controlList = await instance.command.getControlList();
   

   返回文档中所有控件的列表

2. 获取控件值

   const controlValues = await instance.command.getControlValue(options);
   

   返回指定控件的值和相关信息

区域数据

const areaData = instance.command.getAreaValue(options);

返回指定区域的数据，包括区域ID、值、起始页码等信息

实用工具

页面设置

const [top, right, bottom, left] = instance.command.getPaperMargin();

返回当前文档的页边距设置

语言设置

const locale = await instance.command.getLocale();

返回编辑器当前使用的语言设置

元素查找

const elementList = await instance.command.getElementById(options);

根据元素ID查找并返回对应的元素列表

事件相关

鼠标位置上下文

const positionContext = instance.command.getPositionContextByEvent(evt);

通过鼠标事件获取当前位置的上下文信息，包括：

• 页码
• 当前元素
• 范围矩形
• 表格信息(如果位于表格中)

总结

Canvas-Editor 提供了全面的数据获取API，涵盖了从基础文档内容到高级选区操作的各种需求。开发者可以根据实际场景选择合适的API来获取所需数据，实现丰富的编辑功能和交互体验。

在使用这些API时，需要注意同步和异步方法的区别，大数据量操作建议使用异步方法以避免阻塞主线程。同时，合理利用选区相关API可以大大增强编辑器的交互能力。

canvas-editor rich text editor by canvas/svg 项目地址: https://gitcode.com/gh_mirrors/ca/canvas-editor