问题描述

Q:请问下省市区的级联需要怎么实现
Q:省市区联动如何实现

解决方案

思路：应用监听编辑器的”elementContentChange”事件，然后联动设置其他省市区元素的值

Step1: 应用监听编辑器的”elementContentChange”事件

thinkEditorKit.addEventListener(E_EVENT_KEY.elementContentChange, this.OnElementContentChangeEvent);

Step2: 准备省市区知识库

• 省市区知识库可以是自己数据库中的预设数据
• 也可以使用vue2 demo中提供的ProvinceCityAreaHelper辅助功能文件

  import { provinceCityAreaHelper } from '@/components/editorHelper/ProvinceCityAreaHelper';

Step3: 监听到省份变化，则联动更改市区元素

• 使用GetObjectFragment或GetElementsContent获取元素显示内容。
• 省市区元素的Id应用应当自行在制作模板时维护好，可自定义。示例：provinceId、cityId、areaId
  `
  OnElementContentChangeEvent(e /ThinkEditorEvent/) {

  let thinkEditor = e.data.editor;
  let eventData = e.data; /*ThinkEditorEventData*/
  let bodyData = eventData.data;
  let eleId = bodyData.id;

  if (eventData.handle != E_EVENT_HANDLE.event) {
    return;
  }
  /***********************************************
   * 动态设置 省 市 区 选项
   * ********************************************/
  //省 DE02.01.009.01
  let provinceId = 'DE02.01.009.01';
  //市 DE02.01.009.02
  let cityId = 'DE02.01.009.02';
  //区 DE02.01.009.03
  let areaId = 'DE02.01.009.03';

  if (eleId != provinceId && eleId != cityId && eleId != areaId) {
    return false;
  }
  if (eleId == provinceId) {
    let currentProvinceName = bodyData.text;
    let currentCityName = thinkEditor.GetObjectFragment(E_IDENTITY_OBJECT_TYPE.Element, cityId, E_DOC_FORMAT.TEXT, {});
    let cityNames = provinceCityAreaHelper.GetCityList(currentProvinceName);

    if (cityNames.length > 0 && cityNames.indexOf(currentCityName) == -1) {
      currentCityName = cityNames[0];
      thinkEditor.SetElementContent(cityId, currentCityName);
    }

    let currentAreaName = thinkEditor.GetObjectFragment(E_IDENTITY_OBJECT_TYPE.Element, areaId, E_DOC_FORMAT.TEXT, {});
    let areaNames = provinceCityAreaHelper.GetAreaList(currentProvinceName, currentCityName);

    if (areaNames.length > 0 && areaNames.indexOf(currentAreaName) == -1) {
      currentAreaName = areaNames[0];
      thinkEditor.SetElementContent(areaId, currentAreaName);
    }
    return true;
  } else if (eleId == cityId) {
    let currentProvinceName = thinkEditor.GetObjectFragment(E_IDENTITY_OBJECT_TYPE.Element, provinceId, E_DOC_FORMAT.TEXT, {});
    let currentCityName = bodyData.text;
    let currentAreaName = thinkEditor.GetObjectFragment(E_IDENTITY_OBJECT_TYPE.Element, areaId, E_DOC_FORMAT.TEXT, {});
    let areaNames = provinceCityAreaHelper.GetAreaList(currentProvinceName, currentCityName);
    if (areaNames.length > 0 && areaNames.indexOf(currentAreaName) == -1) {
      currentAreaName = areaNames[0];
      thinkEditor.SetElementContent(areaId, currentAreaName);
    }
    return true;
  }
  return false;
}

`