问题描述

Q: 如何设置（实现）动态选项
Q: 使选项动态变化

解决方案

方案一：使用内置选项UI实现

step1: 应用监听编辑器optionResource事件

thinkEditor.addEventListener(E_EVENT_KEY.optionResource, this.OnOptionResourceRequest);

step2:触发 请求更新选项

• 前置条件：应用监听了编辑器optionResource事件
• optionResource.request 事件格式

  {
    "handle": "request",
    "type": "optionResource",
    "data": {
        "docMark": "KLAS67006",
        "docName": "",
        "docType": 1,
        "method": "optionSelectorFilterKeywordChange",
        "id": "",
        "inputHandle": {
            "inputMode": 2,
            "optionClass": "系统",
            "optionId": "省份",
            "keyword": "s"
        }
    }
  }

• 触发场景1： 双击元素时-产生一次optionResource.request事件
• 触发场景2： 过滤器内容有变更时-产生optionResource.request事件(带keyword)
  

step3: 调用SetOptions()动态更新可选项

• 应用可根据事件中的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);