- 方案一:使用内置选项UI实现
- step1: 应用监听编辑器optionResource事件
- step2:触发 请求更新选项
- 触发场景1: 双击元素时-产生一次optionResource.request事件
- 触发场景2: 过滤器内容有变更时-产生optionResource.request事件(带keyword)
- optionResource.request 事件格式
- step3: 更新选项 并触发 显示内置选项选择UI
- 方案二:应用自行实现选项选择UI
- step1: 配置编辑器不使用内置选项选择UI
- step2: 应用监听编辑器openInputHandleSelector事件
- step3: 用户选择后 应用调用如下接口更新元素内容到编辑器
- 按选项Id更新到元素
- 按内容更新到元素
方案一:使用内置选项UI实现
- 注意:本方案需要配置指定元素为-动态选项
- 只有配置为动态选项的元素才会产生optionResource事件
step1: 应用监听编辑器optionResource事件
thinkEditor.addEventListener(E_EVENT_KEY.optionResource, this.OnOptionResourceRequest);
step2:触发 请求更新选项
- 前置条件:应用监听了编辑器optionResource事件
触发场景1: 双击元素时-产生一次optionResource.request事件
触发场景2: 过滤器内容有变更时-产生optionResource.request事件(带keyword)
optionResource.request 事件格式
{
"handle": "request",
"type": "optionResource",
"data": {
"docMark": "KLAS67006",
"docName": "",
"docType": 1,
"method": "optionSelectorFilterKeywordChange",
"id": "",
"inputHandle": {
"inputMode": 2,
"optionClass": "系统",
"optionId": "省份",
"keyword": "s"
}
}
}
step3: 更新选项 并触发 显示内置选项选择UI
- 应用可根据事件中的Id(元素Id)、optionClass、optionId、keyword等自行判断需要更新的选项内容
简化示例
async OnOptionResourceRequest(e /*ThinkEditorEvent*/) {
await AppFetchOptionDataTest();// 应用取选项数据
thinkEditor.SetOptions([newOption]); //更新选项,必要
}
代码示例
async OnOptionResourceRequest(e /*ThinkEditorEvent*/) {
//let editorId = e.data.editorId;
let thinkEditor = e.data.editor;
let eventData = e.data; /*ThinkEditorEventData*/
let bodyData = eventData.data;
let handle = eventData.handle;
if (handle != E_EVENT_HANDLE.request) {
//只处理-请求设置源的事件
return;
}
let inputHandle = bodyData.inputHandle;
if (inputHandle.optionClass == '医生' && inputHandle.optionId == '当前患者') {
//应用利用元素Id、source、option等信息动态决定加载需要使用的资源
if (thinkEditor.userDefinedOptionFlag == 1) {
//今日患者
thinkEditor.userDefinedOptionFlag = 0; //for test
//-------模拟应用异步动态获取选项数据
await this.sleep(500);
//----------------------------
let newOption = new Option('医生', '当前患者');
newOption.items = new Array();
newOption.items.push(new OptionItem('当前患者-张三', '1', 1, '当前患者-张三a'));
newOption.items.push(new OptionItem('当前患者-李四', '1', 1, '当前患者-李四'));
newOption.items.push(new OptionItem('当前患者-王五', '1', 1, '当前患者-王五'));
thinkEditor.SetOptions([newOption]);//更新选项,必要
} else {
//昨日患者
thinkEditor.userDefinedOptionFlag = 1; //for test
//-------模拟应用异步动态获取选项数据
await this.sleep(500);
//----------------------------
let newOption = new Option('医生', '当前患者');
newOption.items = new Array();
newOption.items.push(new OptionItem('昨日患者-张三', '1', 1, '昨日患者-张三a'));
newOption.items.push(new OptionItem('昨日患者-李四', '1', 1, '昨日患者-李四'));
newOption.items.push(new OptionItem('昨日患者-王五', '1', 1, '昨日患者-王五'));
thinkEditor.SetOptions([newOption]); //更新选项,必要
}
}
}
方案二:应用自行实现选项选择UI
- 注意:本方案会接管所有选项元素,都不再使用内置选项选择UI
step1: 配置编辑器不使用内置选项选择UI
var thinkEditor = new ThinkEditor({
...
useInnerOptionSelectBox : false
...
});
step2: 应用监听编辑器openInputHandleSelector事件
thinkEditor.addEventListener(E_EVENT_KEY.openInputHandleSelector, this.OnOpenInputHandleSelector);
step3: 用户选择后 应用调用如下接口更新元素内容到编辑器
按选项Id更新到元素
thinkEditor.SetOptions(setOptionIds);
thinkEditor.SetElementSelectItems('', items);
按内容更新到元素
thinkEditor.SetElementContent('', val);
文档更新时间: 2025-08-01 16:05 作者:admin