方案一:使用内置选项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等自行判断需要更新的选项内容

thinkEditor.SetOptions()

简化示例
 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