ThinkEditorKit 概述

ThinkEditorKit 是信译编辑器 一体化 UI 套件，封装工具栏（文件/编辑/插入/打印/视图）、文档页签栏、文档编辑区及多文档 ThinkEditorInstance 管理。

典型用法：

const thinkEditorKit = new ThinkEditorKit({
  instanceName: "实例1",
  lib: "/editorSdk/",
  // selectToolTab: "edit",  // 默认即为编辑页签，可省略
});
await thinkEditorKit.LoadAsync(document.getElementById("editor-root"));
const thinkEditor = await thinkEditorKit.CreateEditorAsync({ docName: "doc1", showName: "新文档", selectEditor: true });
thinkEditor.NewDoc("doc1", E_DOC_TYPE.Entity);

更多 Kit UI 配置见 Kit UI 常用配置示例。

ThinkEditorKit 继承 EventTarget，可监听编辑器内部事件（经 editorInstance 路由后冒泡到 Kit）。常用注册方式见 Kit 事件。

构造函数

描述

创建 Kit 实例，合并默认配置与 options，并初始化内部 ThinkEditorInstance。

Load / LoadAsync 之前也可仅通过 options 预置配置；UI 相关项在 LoadAsync 后才会渲染到 DOM。

接口

new ThinkEditorKit(options?: object)

参数

返回值

Load

描述

加载 Kit UI 到指定 DOM 容器（LoadAsync 的同步包装）。

会清空 container 内容，创建工具栏、工具面板、文档页签栏（可选）、文档编辑区，并初始化工具页签（默认选中 selectToolTab，未配置时为 编辑 页签）。

接口

async Load(container: HTMLElement): Promise<void>

参数

返回值

LoadAsync

描述

异步加载 Kit 完整 UI 结构。

1. 清空并记录 container
2. 按 showToolBar / showToolPanel / showDocBar / showDocPanel 创建对应区域
3. 初始化工具页签与工具面板内容（激活页签见 selectToolTab，默认 "edit"）
4. 刷新文档页签栏与 docPanel 高度

接口

async LoadAsync(container: HTMLElement): Promise<void>

参数

返回值

Configure

描述

运行时合并配置并应用到 UI（工具栏页签名/显隐、iconMap、toolBarAutoWrap、selectToolTab、preventDefaultKeys、文档栏等）。

• Load 之前调用：合并 this.config 与 editorCommonOptions（Kit 键见 KIT_ONLY_CONFIG_KEYS），不操作 DOM
• Load 之后调用：同步 DOM、工具栏实例；若 *Bar.items / iconMap 等变更会重建工具面板；lib / auth 等编辑器项写入 editorCommonOptions，影响后续 CreateEditorAsync；若传入 selectToolTab 会切换到对应工具页签；若 toolBarAutoWrap 变更会重建工具面板

接口

async Configure(settings?: object): Promise<void>

参数

返回值

CreateEditorAsync

描述

创建并注册一个新的 ThinkEditor 文档实例：执行 InitAsync、预置 container = docPanel、注册右键菜单、加入 editorInstance。

首份文档创建后无论 selectEditor 为何值，都会自动 SelectEditor 并 Load 到 docPanel。
第 2 份及以后：selectEditor === false 时仅 InitAsync + AddEditor，待 SelectEditor（或页签切换）再 Load，避免多 canvas 堆叠。

若 docName 已存在，直接返回已有实例。

当 showDocBar === false 时，创建新文档前会自动 CloseAllEditors()（单文档模式），且创建后会自动 SelectEditor 以立即显示文档。

接口

async CreateEditorAsync(editorOptions?: object): Promise<ThinkEditor>

参数

返回值

批量创建多文档（推荐）

连续创建时第 1 份会自动显示；其余使用 selectEditor: false，需要时再 SelectEditor：

for (const item of docList) {
  await thinkEditorKit.CreateEditorAsync({ docName: item.name, showName: item.title, selectEditor: false });
}
// 首份已自动 Load；若要默认展示其他文档：
// thinkEditorKit.SelectEditor(docList[2].name);

SelectEditor

描述

按 docName 切换当前选中文档：对旧文档 UnLoad，对新文档 Load，并刷新文档页签栏。

内部经 ThinkEditorInstance.SelectEditor 处理，切换后会恢复输入焦点（SetInputFocus / SetEditorFocus）。

接口

SelectEditor(docName: string): void

参数

返回值

SelectEditorByEditorId

描述

按 editorId 切换当前选中文档，并刷新文档页签栏。

接口

SelectEditorByEditorId(editorId: string): boolean

参数

返回值

CloseEditor

描述

关闭指定文档（UnInit 并移出列表），自动选中最近使用的文档，并刷新页签栏。

接口

CloseEditor(doc: string | ThinkEditor): boolean

参数

返回值

CloseAllEditors

描述

关闭全部已打开文档，并刷新页签栏。

接口

CloseAllEditors(): void

参数

无。

返回值

AddEditor

描述

将已在外部创建并完成 InitAsync 的 ThinkEditor 注册到 Kit 的 editorInstance。

docName 重复时拒绝添加。

接口

AddEditor(thinkEditor: ThinkEditor): boolean

参数

返回值

GetEditors

描述

获得Kit在所有编辑器ThinkEditor对象。

接口

GetEditors(): Array<ThinkEditor> | undefined

参数

返回值

GetEditor

描述

按 docName 获取已注册的 ThinkEditor 实例。

接口

GetEditor(docName: string): ThinkEditor | undefined

参数

返回值

GetEditorByShowName

描述

按页签显示名 showName 查找编辑器。

接口

GetEditorByShowName(showName: string): ThinkEditor | undefined

参数

返回值

GetEditorByIndex

描述

按打开顺序索引获取编辑器（从 0 开始）。

接口

GetEditorByIndex(index: number): ThinkEditor | undefined

参数

返回值

GetEditorByEditorId

描述

按 editorId 获取编辑器实例。

接口

GetEditorByEditorId(editorId: string): ThinkEditor | undefined

参数

返回值

GetSelectedEditor

描述

获取当前选中的 ThinkEditor 实例。

接口

GetSelectedEditor(): ThinkEditor | undefined

参数

无。

返回值

GetSelectedDocName

描述

获取当前选中文档的 docName。

接口

GetSelectedDocName(): string

参数

无。

返回值

GetEditorCount

描述

返回当前打开的文档数量。

接口

GetEditorCount(): number

参数

无。

返回值

GetLastEditor

描述

按 selectedTime 获取最近一次被选中的编辑器（关闭文档时用于自动切换）。

接口

GetLastEditor(): ThinkEditor | undefined

参数

无。

返回值

Destroy

描述

销毁 Kit 对 editorInstance 内部事件的路由监听（removeInnerEventListenerAgent）。

注意：不会自动 CloseAllEditors / UnInit 各 ThinkEditor，也不会移除已挂载 DOM。页面卸载前建议业务先关闭全部文档。

接口

Destroy(): void

参数

无。

返回值

事件监听

描述

ThinkEditorKit 继承 EventTarget。各 ThinkEditor 的内部事件经 ThinkEditorInstance 汇聚后，由 Kit 的 OnInnerEvent 再次 dispatchEvent 到 Kit 自身。

业务可在 Kit 上监听经 ThinkEditorInstance 汇聚后冒泡的事件（事件名见 E_EVENT_KEY）。常用 Kit 级事件见 Kit 事件。

接口

kit.addEventListener(type: string, listener: EventListener): void
kit.removeEventListener(type: string, listener: EventListener): void

参数

返回值

Kit 事件

描述

ThinkEditorKit 在构造时会通过 addInnerEventListenerAgent() 将 editorInstance 上的全部 E_EVENT_KEY 事件路由到 Kit 的 OnInnerEvent，再 dispatchEvent 到 Kit 自身。业务在 LoadAsync 之后 向 Kit 注册监听即可收到多文档场景下的统一回调。

回调参数为 ThinkEditorEvent，常用字段：

需在业务侧从 SDK 引入 E_EVENT_KEY（如 ThinkEditor.Defined.ts / 打包后的等价导出）。

注册示例

import { E_EVENT_KEY } from "./ThinkEditor.Defined.js"; // 路径以项目为准

await thinkEditorKit.LoadAsync(container);

thinkEditorKit.addEventListener(E_EVENT_KEY.docModified, OnDocModified); // 文档内容有修改
thinkEditorKit.addEventListener(E_EVENT_KEY.instanceChange, OnInstanceChange); // 文档有增减
thinkEditorKit.addEventListener(E_EVENT_KEY.focusChange, OnDocFocusChange); // 文档中输入焦点有变化
thinkEditorKit.addEventListener(E_EVENT_KEY.drop, OnDocDropEvent); // 拖动内容到文档中
thinkEditorKit.addEventListener(E_EVENT_KEY.selectEditorChange, OnSelectEditorChange); // 文档 docTab 发生了切换
thinkEditorKit.addEventListener(E_EVENT_KEY.closeDoc, OnCloseDocRequest); // tab 的 × 被点击

function OnDocModified(evt) {
  const editor = evt.data.editor;
  // ...
}

function OnCloseDocRequest(evt) {
  // 返回 false 或调用 evt.preventDefault() 可取消 Kit 默认关页行为
  if (!confirm("关闭文档？")) {
    evt.preventDefault();
    return false;
  }
}

页面卸载或 Kit 销毁前，应对称调用 removeEventListener；Destroy() 仅移除 Kit 内部路由，不会自动移除业务监听。

常用 Kit 事件

closeDoc 与页签关闭

页签 × 时 Kit 调用 editor.dispatchEditorRequest(E_EVENT_KEY.closeDoc, { docName })，监听方取消后不会调用 closeDocument。业务若仅监听 Kit 而未拦截，Kit 在请求未被取消时会默认关闭该文档。

与单文档 thinkEditor.addEventListener 的区别

同一 E_EVENT_KEY 在单文档上也会触发；多文档应用推荐在 Kit 上注册上述实例级事件，避免为每个 thinkEditor 重复绑定。

配置项说明

构造函数 options / Configure(settings) 支持的主要字段：

Kit 布局

配置分流：上表及 *Bar 页签配置仅作用于 Kit UI（this.config），不会传入 SetEditorConfig。其余字段（如 lib、auth）进入 editorCommonOptions，在 CreateEditorAsync 时传给编辑器。完整 Kit 键列表见源码 KIT_ONLY_CONFIG_KEYS。

各工具页签（fileBar / editBar / insertBar / printBar / viewBar）

页签/group 显隐规则见源码注释 KIT_BAR_CONFIG_KEYS 与 isKitBarToolbarAbsent。

编辑器公共项（传入 CreateEditorAsync / SetEditorConfig）

options / Configure(settings) 中除 Kit 专用键外的字段均合并进 editorCommonOptions（见 KIT_ONLY_CONFIG_KEYS）。

Kit UI 常用配置示例

选中工具页签（selectToolTab）

未配置时默认即为 编辑 页签，无需额外设置：

const kit = new ThinkEditorKit({ lib: "/editorSdk/" });
await kit.LoadAsync(container);
// 加载后顶部工具页签与下方面板均为「编辑」

指定其他初始页签：

const kit = new ThinkEditorKit({
  lib: "/editorSdk/",
  selectToolTab: "file", // file | edit | insert | print | view
});

若指定页签被隐藏（如 hideToolBarItems: ["fileBar"] 且 selectToolTab: "file"），则自动回退到第一个可见页签。

运行时通过 Configure 代码切换页签：

await kit.Configure({ selectToolTab: "insert" });

工具栏自动换行（toolBarAutoWrap）

默认 开启（1，构造时可省略）。组内只有一行时，图标按宽度自动换行；组内有多行时（如开关 + 单选两行），整组换行并保留组内行结构：

const kit = new ThinkEditorKit({
  lib: "/editorSdk/",
  // toolBarAutoWrap 默认为 1，可省略
});

关闭自动换行（单行、超出裁剪）：

const kit = new ThinkEditorKit({
  toolBarAutoWrap: 0,
});
await kit.LoadAsync(container);

await kit.Configure({ toolBarAutoWrap: 0 });

Kit 配置与编辑器配置分离

构造 / Configure 时，Kit 专用项只影响 UI，不会传入 SetEditorConfig；其余字段进入 editorCommonOptions，在 CreateEditorAsync 时传给编辑器内核。

const kit = new ThinkEditorKit({
  // —— Kit UI（不进 SetEditorConfig）——
  selectToolTab: "edit",
  hideToolBarItems: [],
  editBar: {
    name: "编辑",
    // items: { group1: [...] }  // 可选，覆盖部分工具组
  },
  iconMap: { /* 工具栏图标 */ },

  // —— 编辑器（进 editorCommonOptions / SetEditorConfig）——
  lib: "/editorSdk/",
  fontPath: "/editorFonts/",
  auth: { mode: 0 },
});

await kit.LoadAsync(container);

// 运行时仅更新编辑器授权（影响后续新建的 ThinkEditor）
await kit.Configure({ auth: { mode: 1, company: "xxx" } });

Kit 专用键完整列表见源码 KIT_ONLY_CONFIG_KEYS（含 showToolBar、editBar、fileBar、selectToolTab、toolBarAutoWrap 等）。

组合示例

const kit = new ThinkEditorKit({
  lib: "/editorSdk/",
  selectToolTab: "edit",       // 默认编辑页签（可省略）
  preventDefaultKeys: ["saveDoc"], // 保存按钮交给业务处理
});

await kit.LoadAsync(document.getElementById("editor-root"));
const editor = await kit.CreateEditorAsync({
  docName: "doc1",
  showName: "新文档",
  selectEditor: true,
});
editor.NewDoc("doc1", E_DOC_TYPE.Entity);

公开属性（只读/运行时）

典型生命周期

new ThinkEditorKit(options)
  → await LoadAsync(container)
  → await CreateEditorAsync({ docName, showName, selectEditor: true })
  → editor.NewDoc / ParseDoc ...
  → SelectEditor(otherDocName)     // 切换页签
  → CloseEditor(docName)           // 关闭文档
  → Destroy()                      // 页面卸载

单文档 ThinkEditor 生命周期（由 Kit 内部驱动）：

InitAsync → Load ↔ UnLoad（切换页签）→ UnInit（关闭文档）