ThinkEditor

https://docs.thinkeditor.com/docs/thinkeditor-design
Admin
ThinkEditor is a cross-platform, fully structured electronic medical record (EMR) editor designed to...
Tokens:127,667
Snippets:981
Trust Score:0.6
Update:1 week ago
Show doc for...
Tokens:
Raw
### Complete Review Trace Setup Example

Source: https://docs.thinkeditor.com/docs/thinkeditor-design/thinkeditor-design-1h0n7h0n4el62

Complete example showing how to set current author info, edit behavior, document type, and view mode to enable and display review traces.

```javascript
//设置当前编辑者信息
thinkEditor.SetCurrentAuthorInfo(
 { 
    terminal: 'pc', 
    authorId: 'appGuid1', 
    authorName: '主治医生1', 
    permissionLevel: 1, 
    claims: 'claim1;claim2;',
    attrs : {
        customAttr : '上级医师审阅修改'
    }
});

//设置编辑行为
thinkEditor.SetEditBehavior({
    enablePermission : true,
    enableRevise : true,
    modifySameLevel : true,
    fristEditByRevise : true,
    modifyOwnerOldByRevise : true,
    initialContentNotBelongCreator : false,
});

//编辑文档(非模板)才会产生痕迹
thinkEditor.SetDocType(E_DOC_TYPE.Entity);

//按需设置 是否显示软删内容、是否显示痕迹线
thinkEditor.SetViewMode(E_VIEW_MODE.Edit,
{ 
  displayReviseAuxiliary: true, 
  displayReviseDel: true 
});
```

--------------------------------

### Register Kit event listeners example

Source: https://docs.thinkeditor.com/docs/thinkeditor-design/thinkeditor-design-1hd1ukvcj9lpf

Example of registering Kit-level event listeners after LoadAsync. Shows how to handle docModified, instanceChange, focusChange, drop, selectEditorChange, and closeDoc events. The closeDoc handler can cancel default close behavior by calling evt.preventDefault() or returning false.

```javascript
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;
  }
}
```

--------------------------------

### 运行时通过 Configure 切换页签

Source: https://docs.thinkeditor.com/docs/thinkeditor-design/thinkeditor-design-1hd1ukvcj9lpf

使用 kit.Configure 在运行时切换工具页签，例如切换到 insert 页签。

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

--------------------------------

### new ThinkEditorKit(options?)

Source: https://docs.thinkeditor.com/docs/thinkeditor-design/thinkeditor-design-1hd1ukvcj9lpf

Creates a Kit instance, merging default configuration with the provided options and initializing the internal ThinkEditorInstance. UI-related items are rendered only after LoadAsync is called.

```APIDOC
## new ThinkEditorKit(options?)

### Description
Creates a Kit instance, merging default configuration with `options`, and initializes the internal `ThinkEditorInstance`. Before `Load` / `LoadAsync`, configuration can be preset via `options`; UI-related items are rendered to the DOM only after `LoadAsync`.

### Method
Constructor

### Endpoint
`new ThinkEditorKit(options?: object)`

### Parameters
#### Constructor Parameters
- **options** (object) - Optional - Kit and editor merged configuration. See configuration items documentation.

### Return Value
- **ThinkEditorKit** - The Kit instance.
```

--------------------------------

### Kit 事件注册示例

Source: https://docs.thinkeditor.com/docs/thinkeditor-design/thinkeditor-design-1hd1ukvcj9lpf

Example of registering event listeners on ThinkEditorKit after LoadAsync, including handling closeDoc cancellation.

```APIDOC
## Kit 事件注册示例

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

### Method
addEventListener

### Endpoint
thinkEditorKit.addEventListener(E_EVENT_KEY.docModified, OnDocModified)

### Parameters
#### Parameters
- **type** (string) - Required - 事件名，如 `E_EVENT_KEY.docModified`
- **listener** (function) - Required - 回调函数

### Request Example
```javascript
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;
  }
}
```

### Response
#### Success Response
- **void** - 无
```

--------------------------------

### UpdateTimeAxis Usage Example

Source: https://docs.thinkeditor.com/docs/thinkeditor-design/UpdateTimeAxis

Shows how to set time data and then call UpdateTimeAxis with an empty string to update the time axis display.

```cpp
    thinkEdiotr.SetTimeData(jsonDataArr);
    thinkEdiotr.UpdateTimeAxis("");
```

--------------------------------

### 使用 ThinkEditorInstance 管理多个编辑器对象

Source: https://docs.thinkeditor.com/docs/thinkeditor-design/thinkeditor-design-1gdeak91r1pch

实际使用建议，利用 ThinkEditorInstance 或自定义方式管理多个编辑器对象。更多 ThinkEditorInstance 管理接口，详见源码 ThinkEditor.Instance.js。

```javascript
//实际使用 源码
const editorsInstance = new ThinkEditorInstance('实例1') 

var thinkEditor1 = new ThinkEditor(thinkEditorParam);
editorsInstance.AddEditor(thinkEditor1);

var thinkEditor2 = new ThinkEditor(thinkEditorParam);
editorsInstance.AddEditor(thinkEditor2);
```

--------------------------------

### Draggable Button Element (Vue/Element UI)

Source: https://docs.thinkeditor.com/docs/thinkeditor-design/thinkeditor-design-1fv6cbvtc35uh

A Vue Element UI button configured as draggable. This is the starting point for drag-and-drop integration, allowing users to drag the button to insert a configured element.

```html
<el-button id="draggerAndInsertElement" size="mini" type="primary" draggable="true">拖拽插入元素</el-button>
```

--------------------------------

### Kit 配置与编辑器配置分离

Source: https://docs.thinkeditor.com/docs/thinkeditor-design/thinkeditor-design-1hd1ukvcj9lpf

构造时 Kit 专用项只影响 UI，不会传入 SetEditorConfig；其余字段进入 editorCommonOptions，在 CreateEditorAsync 时传给编辑器内核。运行时可通过 Configure 更新编辑器授权。

```javascript
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" } });
```

--------------------------------

### Set UI Color with ThinkEditor.SetEditorConfig()

Source: https://docs.thinkeditor.com/docs/thinkeditor-design/thinkeditor-design-1dhse2vppjbrd

Example showing how to listen for the 'setColor' event and respond to a 'request' handle by setting the tab_color configuration using SetEditorConfig(). The color can be specified as a string 'ffff0000' or numeric 0xffff0000.

```javascript
     ThinkEditor.addEventListener("setColor", this.OnSetColor);
     OnSetColor(e){
        console.log(e);
        var data = e.data;
        if(data.handle=="request")
        {//请求UI颜色
            var init_config={};
            init_config.tab_color = "ffff0000";//或0xffff0000
            ThinkEditor.SetEditorConfig(init_config);
        }
        return true;
    }
```

--------------------------------

### step1: 设置监听

Source: https://docs.thinkeditor.com/docs/thinkeditor-design/thinkeditor-design-1djeafksjr21o

在 mounted 生命周期中注册 setElementContent 事件监听器，用于后续按需设置源数据。

```javascript
 async mounted () {  
     ThinkEditor.addEventListener("setElementContent", this.setElemetnContentListener);
}
```

--------------------------------

### step2: 按需加载图片数据

Source: https://docs.thinkeditor.com/docs/thinkeditor-design/thinkeditor-design-1dj2d6bbai72m

处理 imageResource 事件，根据 file 和 md5 匹配图片，调用 SetImageResourceBase64 设置图片数据。

```javascript
methods: {
  OnImageResource(e){
        console.log(e);
        var allow=true;
        var data = e.data;
        if(data.handle=="request")
        {    /*
                应用根据事件中提供的信息，去业务系统的文件系统或数据库中找到对应的数据加载编辑器中使用
                最终目的是调用SetImageResource设置图片数据供编辑器使用
            */
            if(data.file == "当前医师电子签名.jpg" 
                && data.md5 == "a04cfa91f403f799ce07252e85bda12b")
            {//也可以只匹配md5值来找到对应的图片
                var dangqian_yishi = "**b64**";
                var json_cfg={};
                  json_cfg.not_save = false;
                console.log("OnImageResource->SetImageResource:" + data.file);
                var md5 = ThinkEditor.SetImageResourceBase64("当前医师电子签名.jpg", dangqian_yishi, dangqian_yishi.length,json_cfg);
           }
           else if(data.file == "审核医师电子签名.jpg" 
                && data.md5 == "b3aa75a6c69fb17ec3cc4290bbea8a57")
            {
                var shenhe_yishi = "**b64**";
                var json_cfg={};
                json_cfg.not_save = false;
                console.log("OnImageResource->SetImageResource:" + data.file);
                var md5 = ThinkEditor.SetImageResourceBase64("审核医师电子签名.jpg", shenhe_yishi, shenhe_yishi.length,json_cfg);
            }
        }

        return allow;
    }
}
```

--------------------------------

### openMenu event data format

Source: https://docs.thinkeditor.com/docs/thinkeditor-design/thinkeditor-design-1g2cphr7ar6jd

Example data structure of the 'openMenu' event. Contains a 'menu' array with items that have 'action', 'text', 'enable', and 'group' properties. Nested 'menu' arrays exist for 'insert' and 'delete' actions.

```json
{
    "handle": "action",
    "type": "openMenu",
    "data": {     
        "menu": [
            {
                "action": "copy",
                "text": "复制",
                "enable": false,
                "group": "contentOpt"
            },
            {
                "action": "cut",
                "text": "剪切",
                "enable": false,
                "group": "contentOpt"
            },
            {
                "action": "paste",
                "text": "粘贴",
                "enable": true,
                "group": "contentOpt"
            },
            {
                "action": "font",
                "text": "字体",
                "enable": false,
                "group": "commonAttr"
            },
            {
                "action": "paragraph",
                "text": "段落",
                "enable": true,
                "group": "commonAttr"
            },
            {
                "action": "element",
                "text": "元素",
                "enable": true,
                "group": "objectAttr"
            },
            {
                "item": "table",
                "text": "表格",
                "enable": true,
                "group": "objectAttr"
            },
            {
                "action": "knowledge",
                "text": "知识库",
                "enable": true,
                "group": "objectAttr"
            },
            {
                "action": "insert",
                "text": "插入",
                "enable": true,
                "group": "editOpt",
                "menu": [
                    {
                        "action": "colLeft",
                        "text": "列(左侧)",
                        "enable": true,
                        "group": "tableOpt"
                    },
                    {
                        "action": "colRight",
                        "text": "列(右侧)",
                        "enable": true,
                        "group": "tableOpt"
                    },
                    {
                        "action": "rowUp",
                        "text": "行(上面)",
                        "enable": true,
                        "group": "tableOpt"
                    },
                    {
                        "action": "rowDown",
                        "text": "行(下面)",
                        "enable": true,
                        "group": "tableOpt"
                    }
                ]
            },
            {
                "action": "delete",
                "text": "删除",
                "enable": true,
                "group": "editOpt",
                "menu": [
                    {
                        "action": "currentRow",
                        "text": "当前行",
                        "enable": true,
                        "group": "tableOpt"
                    },
                    {
                        "action": "currentCol",
                        "text": "当前列",
                        "enable": true,
                        "group": "tableOpt"
                    },
                    {
                        "action": "currentTable",
                        "text": "当前表格",
                        "enable": true,
                        "group": "tableOpt"
                    }
                ]
            },
            {
                "action": "mergeCells",
                "text": "合并单元格",
                "enable": false,
                "group": "editOpt"
            },
            {
                "action": "splitCells",
                "text": "拆分单元格",
                "enable": false,
                "group": "editOpt"
            }
        ]
    }
}
```

--------------------------------

### step2: 创建ThinkEditor对象

Source: https://docs.thinkeditor.com/docs/thinkeditor-design/thinkeditor-design-1grubjfntq475

创建ThinkEditor实例，传入配置对象，其中lib属性指定SDK路径。此处省略了其他配置项。

```javascript
const thinkEditor = new ThinkEditor({
  lib: '/editorSdk/',
  ...略...
})
```

--------------------------------

### SetDocConfig with pass_app_result and pass_app_msg

Source: https://docs.thinkeditor.com/docs/thinkeditor-design/thinkeditor-design-1dlv507lb8b6p

Example of using ThinkEditor.SetDocConfig() to pass a custom algorithm result and instruct the editor to only fill the result. The pass_app_msg value 'onlyFill' tells the editor that calculation is complete and only content filling should proceed; 'interrupt' is the alternative to abort the built-in operation flow.

```javascript
    var cfg={};
    cfg.pass_app_result = "2.13";//填充计算结果
    //使用"onlyFill"告知编辑器，计算已经完成，只进行内容填充显示过程
    cfg.pass_app_msg = "onlyFill";//interrupt、onlyFill
    ThinkEditor.SetDocConfig(doc_name, cfg);
```

--------------------------------

### 关闭自动换行（toolBarAutoWrap: 0）

Source: https://docs.thinkeditor.com/docs/thinkeditor-design/thinkeditor-design-1hd1ukvcj9lpf

设置 toolBarAutoWrap: 0 关闭自动换行，单行显示，超出裁剪。可在构造时设置，也可通过 Configure 运行时设置。

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

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

--------------------------------

### 初始化时设置刷新频率

Source: https://docs.thinkeditor.com/docs/thinkeditor-design/thinkeditor-design-1dh97tfihh573

在初始化编辑器时，通过 ThinkEditor.Init 设置刷新频率。

```javascript
    var init_config={};
    init_config.canvas_flush_mode = 1;
    init_config.canvas_flush_frequency = 5;
    ThinkEditor.Init(init_config);
```

--------------------------------

### LoadAsync(container)

Source: https://docs.thinkeditor.com/docs/thinkeditor-design/thinkeditor-design-1hd1ukvcj9lpf

Asynchronously loads the complete Kit UI structure. It clears and records the container, creates the corresponding areas based on showToolBar, showToolPanel, showDocBar, and showDocPanel, initializes tool tabs and tool panel content, and refreshes the document tab bar and docPanel height.

```APIDOC
## LoadAsync(container)

### Description
Asynchronously loads the complete Kit UI structure. It clears and records the container, creates the corresponding areas based on `showToolBar`, `showToolPanel`, `showDocBar`, and `showDocPanel`, initializes tool tabs and tool panel content (active tab per `selectToolTab`, default `"edit"`), and refreshes the document tab bar and `docPanel` height.

### Method
Async

### Endpoint
`async LoadAsync(container: HTMLElement): Promise<void>`

### Parameters
#### Parameters
- **container** (HTMLElement) - Required - The mount root node. Same as `Load`.

### Return Value
- **Promise** - Resolves with no value.
```

--------------------------------

### 添加监听 setOptions 事件

Source: https://docs.thinkeditor.com/docs/thinkeditor-design/thinkeditor-design-1fpnjtd6ieot7

在编辑器初始化时添加对 setOptions 事件的监听，用于获取文档选项数据。

```javascript
添加监听setOptions事件
 addEditorEventListener(thinkEditor) {
 ...
  thinkEditor.removeEventListener(E_EVENT_KEY.setOptions, this.OnSetOptions);
 ... 
  }
```

--------------------------------

### step2: 创建ThinkEditorKit对象

Source: https://docs.thinkeditor.com/docs/thinkeditor-design/thinkeditor-design-1gpt21vp7as6i

实例化ThinkEditorKit，传入配置对象，其中instanceName为实例名称。

```javascript
var thinkEditorKit = new ThinkEditorKit({instanceName: "实例1"});
```

--------------------------------

### Configure(settings?)

Source: https://docs.thinkeditor.com/docs/thinkeditor-design/thinkeditor-design-1hd1ukvcj9lpf

Merges configuration at runtime and applies it to the UI. Before Load, it merges this.config with editorCommonOptions without touching the DOM. After Load, it synchronizes the DOM and toolbar instance, rebuilds the tool panel if needed, and applies changes to editor options.

```APIDOC
## Configure(settings?)

### Description
Merges configuration at runtime and applies it to the UI (toolbar tab names/visibility, iconMap, `toolBarAutoWrap`, `selectToolTab`, `preventDefaultKeys`, document bar, etc.).
- **Before Load**: Merges `this.config` with `editorCommonOptions` (Kit keys per `KIT_ONLY_CONFIG_KEYS`), does not operate on DOM.
- **After Load**: Synchronizes DOM and toolbar instance; if `*Bar.items` / `iconMap` etc. change, rebuilds the tool panel; `lib` / `auth` etc. editor items are written to `editorCommonOptions`, affecting subsequent `CreateEditorAsync`; if `selectToolTab` is passed, switches to the corresponding tool tab; if `toolBarAutoWrap` changes, rebuilds the tool panel.

### Method
Async

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

### Parameters
#### Parameters
- **settings** (object) - Optional - Configuration fragment to merge. Fields are the same as constructor `options`, deep merged.

### Return Value
- **Promise** - Resolves with no value.
```

--------------------------------

### SetViewMode 接口定义

Source: https://docs.thinkeditor.com/docs/thinkeditor-design/thinkeditor-design-1dl8j8k2spu1s

定义视图模式设置接口，参数为视图模式枚举和 JSON 配置字符串。

```cpp
void SetViewMode(E_VIEW_MODE mdoe， const char* json)
```

--------------------------------

### 移除监听 setOptions 事件

Source: https://docs.thinkeditor.com/docs/thinkeditor-design/thinkeditor-design-1fpnjtd6ieot7

关闭编辑器时应当移除对 setOptions 事件的监听，避免内存泄漏。

```javascript
关闭编辑器时应当移除监听setOptions事件 
removeEditorEventListener(thinkEditor) {
 ...
  thinkEditor.removeEventListener(E_EVENT_KEY.setOptions, this.OnSetOptions);
 ... 
  }
```

--------------------------------

### 自定义右键菜单项 - onCreateMenu 回调

Source: https://docs.thinkeditor.com/docs/thinkeditor-design//1120

在 onCreateMenu 回调中，通过向 currentMenu 数组 push 新的菜单项来添加自定义右键菜单项。每个菜单项包含 action、text 和 enable 属性。必须返回修改后的菜单数组。

```javascript
const onCreateMenu = function (thinkEditor, currentMenu) {
  //自定义右键菜单项：本方法中，用户增减菜单项，请返回修改后的菜单项。
  currentMenu.push(
    {
      action: "userDefine1",
      text: "用户自定义1",
      enable: true,
    },
    {
      action: "userDefine2",
      text: "用户自定义2",
      enable: true,
    },
  );
  return currentMenu;
};
```

--------------------------------

### 监听 onCreateMenu 和 onMenuAction 事件

Source: https://docs.thinkeditor.com/docs/thinkeditor-design//1120

在初始化 ThinkEditorKit 时，将自定义的回调函数赋值给 onCreateMenu 和 onMenuAction 属性，以拦截右键菜单的创建和菜单点击事件。

```javascript
thinkEditorKit.onCreateMenu = onCreateMenu;
thinkEditorKit.onMenuAction = onMenuAction;
```

--------------------------------

### 初始化 bindEditors 并创建 ThinkEditorInstance

Source: https://docs.thinkeditor.com/docs/thinkeditor-design/thinkeditor-design-1fpnk22hol368

创建 ThinkEditorInstance 实例，管理多个 ThinkEditor 对应多个页签，并将 editors 赋值给 bindEditors 响应式变量。

```javascript
const editorsInstance = new ThinkEditorInstance('实例1') //instanceId='实例1' 管理多个ThinkEditor对应Tabs多页签
const bindEditors = ref(editorsInstance.editors)
```

--------------------------------

### 直接使用父级容器

Source: https://docs.thinkeditor.com/docs/thinkeditor-design/thinkeditor-design-1di6lmce4fht4

编辑器控件需要一个直接的父级容器，该容器不应有padding、border、margin等属性，否则会导致offsetWidth/offsetHeight与contentBox不等。

```html
<template>
      <div ref="editorContainer"/>
</template>
```

--------------------------------

### 添加监听 setAlgorithms.event 事件

Source: https://docs.thinkeditor.com/docs/thinkeditor-design/thinkeditor-design-1fpnjtv6e2hal

在应用初始化时添加对 setAlgorithms.event 事件的监听，用于获取解析文档后产生的算法数据。

```javascript
添加监听setAlgorithms.event事件
 addEditorEventListener(thinkEditor) {
 ...
  thinkEditor.removeEventListener(E_EVENT_KEY.setAlgorithms, this.OnSetAlgorithms);
 ... 
  }
```

--------------------------------

### 解析文档前预加载源数据 (SetSources)

Source: https://docs.thinkeditor.com/docs/thinkeditor-design/thinkeditor-design-1fpnjuf2ace3h

在解析文档前调用 thinkEditor.SetSources(sources) 预加载源数据。用户应结合自己的系统完善 PreLoadUserDefinedSources 方法的实现。

```javascript
thinkEditor.SetSources(sources);
```

--------------------------------

### Enable Permission and Revise

Source: https://docs.thinkeditor.com/docs/thinkeditor-design/thinkeditor-design-1h0n7h0n4el62

Configuration values to enable permission management and allow recording traces.

```plaintext
enablePermission=true enableRevise=true
```

--------------------------------

### 处理 setOptions.request 事件

Source: https://docs.thinkeditor.com/docs/thinkeditor-design/thinkeditor-design-1fpnjtd6ieot7

监听 setOptions.request 事件，通过 thinkEditor.SetOptions() 加载选项数据到文档中。

```javascript
OnSetOptionsRequest(e /*ThinkEditorEvent*/) {
      var thinkEditor = e.data.editor
      if (thinkEditor === undefined) {
        return; //error
      }
      var requestOptionIds = e.data.data;
      var setOptionIds = new Array();
      for (let requestOptionId of requestOptionIds) {
        var optionId = this.$optionsManager1.GetOptionId(requestOptionId.optionClass, requestOptionId.optionId);
        if (optionId !== undefined) {
          setOptionIds.push(optionId);
        }
      }
      thinkEditor.SetOptions(setOptionIds);
    }
```

--------------------------------

### 修改组件样式：文本按钮（key未映射图标）

Source: https://docs.thinkeditor.com/docs/thinkeditor-design/thinkeditor-design-1gv826e7ks3r8

当 key 没有通过 iconMap 配置对应图标资源时，按钮不显示图标，仅显示文本。使用 type: "btnText"。

```javascript
fileBar: {  
name:"系统",
  items:{      
    group1: [
        [
          {
            name: "保存",
            key: "customKey",
            type: "btnText"
          }
        ],
      ]
  ]
}
}
```

--------------------------------

### 调用 InputFragment 插入模板片段

Source: https://docs.thinkeditor.com/docs/thinkeditor-design/thinkeditor-design-1denqbfi9jfcg

示例代码展示如何通过 fetch 获取知识库 XML 文件，并调用 ThinkEditor.InputFragment 将模板片段插入到当前输入位置。使用 credentials:'same-origin' 确保同源请求携带凭据。

```javascript
    InsertFragment(fragment_file)
    {
       var url = "/system/fragment/" + fragment_file; 
        fetch(url,  {credentials:'same-origin'}).then(function (response) {
            response.arrayBuffer().then(data =>  {
               ThinkEditor.InputFragment(data);
            }); 
        }); 
    }
```

--------------------------------

### 自定义x轴-带格式内容

Source: https://docs.thinkeditor.com/docs/thinkeditor-design/thinkeditor-design-1ge7lv9udaegr

使用 fragment 字段设置带格式的X轴内容，注意使用 fragment 时不应再有 text/value 字段。通过 spaceAfter 和 spaceBefore 控制交替显示位置偏移，应用需自行正确设置这些属性。

```javascript
/*******************************
 * 自定义x轴 带格式内容
 * *********************************/
export const SetTimeDataXAxisTest1 = () => {
  let thinkEditor = window.thinkEditor1;

  thinkEditor.SetTimeAxisConfig("", {
    clean: true,
    grid: {
      beginTime: "2024-01-09 00:00:00",
      endTime: "2024-01-22 23:59:59",
    },
  });

  thinkEditor.SetTimeData([
    {
      id: "huxi",
      timeData: [
        { time: "2024-01-11 02:00:00", fragment: "<Paragraph spaceAfter='0.5'><Font size='0.31' color='1e90ff' cfg='10' />R</Paragraph>" },
        { time: "2024-01-12 12:00:00", fragment: "<Paragraph spaceBefore='0.5'><Font size='0.31' color='1e90ff' cfg='10' />R</Paragraph>" }
      ],
    },
  ]);
  thinkEditor.UpdateTimeAxis(""); //必要
};
```

--------------------------------

### new ThinkEditorKit(options)

Source: https://docs.thinkeditor.com/docs/thinkeditor-design/thinkeditor-design-1hd1ukvcj9lpf

Creates a new ThinkEditorKit instance with the provided configuration options.

```APIDOC
## new ThinkEditorKit(options)

### Description
Creates a new ThinkEditorKit instance.

### Interface
Constructor

### Parameters
- **options** (Object) - Required - Configuration object.
  - **instanceName** (string) - Required - Name of the instance.
  - **lib** (string) - Required - Path to the editor SDK.
  - **selectToolTab** (string) - Optional - Initial tool tab to select (e.g., "edit"). Defaults to "edit".

### Return Value
Returns a new ThinkEditorKit instance.
```

--------------------------------

### 错误用法：重复注册事件监听器

Source: https://docs.thinkeditor.com/docs/thinkeditor-design/thinkeditor-design-1dhokrgjtc31r

切换模板会多次mounted()，不同mounted()中调用的this.setElemetnContentListener方法实质为不同方法，会造成重复注册。

```javascript
  mounted() { 
      //error
    ThinkEditor.addEventListener("setElementContent", this.setElemetnContentListener);
    }
```

--------------------------------

### 调用 AddOptions 接口

Source: https://docs.thinkeditor.com/docs/thinkeditor-design/thinkeditor-design-1fpnjtd6ieot7

通过 optionsManager.AddOptions(options) 接口添加选项数据。

```javascript
optionsManager.AddOptions(options)
```

--------------------------------

### ThinkEditor.addEventListener("algorithmCalc", handler)

Source: https://docs.thinkeditor.com/docs/thinkeditor-design/thinkeditor-design-1dlv507lb8b6p

注册监听算法计算请求事件。当用户触发算法计算时，ThinkEditor 会调用此回调函数，并传入包含输入对象和输出对象的事件数据。

```APIDOC
## ThinkEditor.addEventListener("algorithmCalc", handler)

### Description
注册监听算法计算请求事件。当用户触发算法计算时，ThinkEditor 会调用此回调函数，并传入包含输入对象和输出对象的事件数据。

### Method
addEventListener

### Endpoint
ThinkEditor.addEventListener("algorithmCalc", handler)

### Parameters
#### Event Data
- **handle** (string) - 固定为 "request"，表示请求类型。
- **type** (string) - 固定为 "algorithmCalc"，表示事件类型。
- **name** (string) - 算法名称，例如 "张小北-入院记录"。
- **group** (string) - 算法分组标识，例如 "calc_total"。
- **mode** (number) - 模式值，例如 1。
- **scope** (number) - 作用域值，例如 0。
- **inObjects** (array) - 输入对象列表，包含选框和元素等。
- **outObjects** (array) - 输出对象列表，包含计算结果。

#### inObjects 参数
##### 通用参数
- **type** (string) - 对象类型，如 "CheckBox"、"Element"。
- **id** (string) - 对象 ID，可能为空。
- **name** (string) - 对象名称，可能为空。
- **algoRole** (number) - 算法角色，0 表示输入，1 表示输出。
- **weight** (number) - 权重值。

##### 选框参数 (CheckBox)
- **checked** (number) - 是否选中，0 或 1。
- **optionClass** (string) - 选项类别，如 "UserDefine"。
- **optionId** (string) - 选项 ID，如 "age_range"。
- **optionName** (string) - 选项名称，可能为空。
- **groupId** (string) - 分组 ID。
- **itemId** (string) - 选项项 ID，如 "年龄大于60岁"。

##### 元素参数 (Element)
- **content** (string) - 元素内容，如计算结果。

#### outObjects 参数
- **type** (string) - 对象类型，如 "Element"。
- **id** (string) - 对象 ID。
- **name** (string) - 对象名称。
- **algoRole** (number) - 算法角色，1 表示输出。
- **content** (string) - 计算结果内容。

### Request Example
```json
{
    "handle": "request",
    "type": "algorithmCalc",
    "name": "张小北-入院记录",
    "group": "calc_total",
    "mode": 1,
    "scope": 0,
    "inObjects": [
        {
            "type": "CheckBox",
            "id": "",
            "name": "",
            "algoRole": 0,
            "weight": 1.000000,
            "checked": 0,
            "optionClass": "UserDefine",
            "optionId": "age_range",
            "optionName": "",
            "groupId": "1",
            "itemId": "年龄大于60岁"
        }
    ],
    "outObjects": [
        {
            "type": "Element",
            "id": "013",
            "name": "ABCD2评估总分",
            "algoRole": 1,
            "content": "12"
        }
    ]
}
```

### Response
#### Success Response
- 无固定响应格式，回调函数处理事件数据后返回结果。

#### Response Example
无固定响应示例。

```

--------------------------------

### 监听 instanceChange 事件

Source: https://docs.thinkeditor.com/docs/thinkeditor-design/thinkeditor-design-1fpnk22hol368

为 editorsInstance 添加 instanceChange 事件监听器，用于在实例变化时触发 UI 更新。

```javascript
editorsInstance.addEventListener(E_EVENT_KEY.instanceChange, OnInstanceChange)
```

--------------------------------

### step2: 按需设置源数据

Source: https://docs.thinkeditor.com/docs/thinkeditor-design/thinkeditor-design-1djeafksjr21o

在 setElementContent 事件监听器中，当请求设置元素内容且元素需要源但未加载时，通过 ThinkEditor.SetSource 按需设置源数据。包含演示方法 ProduceEntitySourceData、HasEntitySourceExist、GetEntitySource 的调用。

```javascript
methods: {
  setElemetnContentListener(e){
        console.log(e);
        var allow=true;
        var data = e.data;
        if(data.handle=="request")
        {//请求设置元素内容
            /* 提取元素信息 */
            var id = data.id;
            var name = data.name;

            var source_class = data["source-class"];
            var source_id = data["source-id"];

            let thinkEditorDemo = new ThinkEditorDemo();

            if(source_class != "" && source_id != "" //该元素需要源
                    && data.has_source == false)//该元素没有加载源
            {
                 /*
                ProduceEntitySourceData、HasEntitySourceExist、GetEntitySource
                三个方法都是演示方法，第三方应用应当使用source_class、source_id去自己的业务系统中找是否存在源
                最终调用ThinkEditor.SetSource()实现按需设置源数据
                */
                thinkEditorDemo.ProduceEntitySourceData();//构造文档实体使用的测试源数据
                if(thinkEditorDemo.HasEntitySourceExist(source_class, source_id))
                {
                    var fragment = thinkEditorDemo.GetEntitySource(source_class, source_id);
                    ThinkEditor.SetSource(source_class, source_id, fragment);
                }
            }
        }

        return allow;
    }
}

```

--------------------------------

### 调用 DisplayCheckBoxSetWindow 弹出选框插入配置 UI

Source: https://docs.thinkeditor.com/docs/thinkeditor-design/thinkeditor-design-1g70tqv3cm1rv

在 UI 方式中，调用 thinkEditor.DisplayCheckBoxSetWindow 接口，传入 E_DISPLAY_MODE.Show 和 E_SET_MODE.InsertCommon 参数，以弹出选框插入配置 UI，用于选择选集。

```csharp
thinkEditor.DisplayCheckBoxSetWindow(E_DISPLAY_MODE.Show, E_SET_MODE.InsertCommon)
```

--------------------------------

### 指定其他初始页签（selectToolTab）

Source: https://docs.thinkeditor.com/docs/thinkeditor-design/thinkeditor-design-1hd1ukvcj9lpf

通过 selectToolTab 指定初始工具页签，可选值 file | edit | insert | print | view。若指定页签被隐藏，则自动回退到第一个可见页签。

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