说明

选框支持自定义JavaScript脚本，可实现各种选框联动场景。

• 按照本文的方法可以快速的调试JavaScript脚本，使其可以正常工作。

案例实现目标

将多选框的选择结果 加上方框后拼接显示到目标结果元素。

step1: 准备选集

• 注意：插入选集时 应当指定 选集名。相同选集名的多个选框才可以一起联动。
• 自定义选集名，示例：”linkageTest”

方式一、通过接口插入选集

  /*********************************
   * step2:插入选集
   * multipleChoice=0 单选
   * multipleChoice=1 多选
   * ********************************/
  thinkEditor.InsertCheckBoxGroup({
    checkFigureStyle: checkFigureStyle,
    //hideCheckFigure: true, //是否显示选框
    option: {
      optionName: "linkageTest", //不填，会随机产生
      optionClass: optionClass,
      optionId: optionId,
      multipleChoice: multipleChoice,
    },
  });

方式二、通过UI插入选集

step2: 准备输出元素

• 输出元素用于显示联动结果
• 自定义设置元素的Id值，示例：”out”

方式一、通过接口插入元素

  thinkEditor.InsertElement({
    id: "out",
    hint: "选择结果",
    width: 3, //最小宽度
    widthUnderline: true //宽度元素下划线
  });

方式二、通过UI插入元素

step3: 打开-试一试-在线调试脚本[确保脚本可正常工作]

• 在ExecuteCheckBoxScript()方法中写入脚本语句
• 脚本中可使用的变量有 thinkEditor(当前编辑器)、checkBox(单击的选框)
• 需要断点的位置写上debugger,然后点击运行按钮。详见《试一试-使用和调试》说明

export const ExecuteCheckBoxScript = (thinkEditor, checkBox) => {
/**************开始： 以下代码为脚本代码  **********************/
  let optOptionName = "linkageTest";
  let outElementId = "out";
  let checkboxs = thinkEditor.GetCheckBoxProperties({
    mode: 3,
    optionNames: [optOptionName],
  });

  let selectedContent = [];
  checkboxs.forEach((checkbox) => {
    if (checkbox.checked && selectedContent.includes(checkbox.itemId) == false) {
      selectedContent.push(checkbox.itemId);
    }
  });

  let outStr = "";
  selectedContent.forEach((electedStr) => {
    let elementXml = `<Element cfg='34000' xCfg='10' hint=' ' width='0.450' borderStyle='1' borderWidth='0.012'>` + electedStr + "</Element>";
    outStr += (outStr == "" ? "" : "/") + elementXml;
  });

  thinkEditor.SetElementContent(outElementId, outStr, { forbidContentCorrection: true });
  /**************结束 以上代码为脚本代码  **********************/
};

step4: 给每个选框配置脚本

• 复制ExecuteCheckBoxScript()方法中的JavaScript代码，粘贴到选框-脚本配置UI中

其他

• 可打开一个已有模版进行选框脚本测试
• 配置完成后，可以保存该文档