图标映射关系

let iconMap = {
  /***********************
   * 右键菜单图标
   * **************************/
  copy: "icon-copy",
  cut: "icon-cut",
  paste: "icon-paste",
  pasteText: "icon-paste-text",
  font: "icon-ziti",
  paragraph: "icon-paragraph",
  element: "icon-element",
  checkBox: "icon-checkbox",
  table: "icon-table",
  colLeft: "icon-col-left",
  colRight: "icon-col-right",
  rowUp: "icon-row-up",
  rowDown: "icon-row-down",
  mergeCells: "icon-merge-cell",
  splitCells: "icon-split-cell",
  delete: "icon-delete-col",
  insert: "icon-insert",
  insertColLeft: "icon-col-left",
  insertColRight: "icon-col-right",
  insertRowUp: "icon-row-up",
  insertRowDown: "icon-row-down",
  deleteCurrentRow: "icon-delete-row",
  deleteCurrentCol: "icon-delete-col",
  deleteCurrentTable: "icon-delete-table",
  knowledge: "icon-knowledge",
  /***********************
   * editBar
   * **************************/
  redo: "icon-redo",
  undo: "icon-undo",
  clearFormat: "icon-clear-format",
  formatBrush: "icon-format-brush",
  ferrule: "icon-ferrule",
  bold: "icon-bold",
  italic: "icon-italic",
  underline: "icon-underline",
  strikethrough: "icon-strikethrough",
  superScript: "icon-super-script",
  subScript: "icon-sub-script",
  alignHorizontalLeft: "icon-align-horizontal-left",
  alignHorizontalCenter: "icon-align-horizontal-center",
  alignHorizontalRight: "icon-align-horizontal-right",
  alignHorizontalJustify: "icon-align-horizontal-Justify", //两端对齐
  alignHorizontalDistribute: "icon-align-horizontal-distribute", //分散对齐
  selectedLocked: "icon-locked",
  searchReplace: "icon-search",
  cleanPrint: "icon-print",
  /***********************
   * fileBar
   * **************************/
  saveDoc: "icon-save",
  openDoc: "icon-open",
  newDoc: "icon-new-doc",
  newTemplate: "icon-new-template",
  newTimeAxis: "icon-timeaxis",
  exportXml: "icon-xml",
  exportTemplate: "icon-xml-template",
  exportHtml: "icon-html",
  exportPdf: "icon-pdf",
  exportImg: "icon-image",
  exportJson: "icon-json",
  /***********************
   * insertBar
   * **************************/
  displayElementSetWindow: "icon-element",
  displayCheckBoxSetWindow: "icon-checkbox",
  displayFormulaSetWindow: "icon-formula",
  inserTablePicker: "icon-table",
  selectInsertImage: "icon-image",
  displayPageNumSetWindow: "icon-page-num",
  displayBarCodeSetWindow1: "icon-qrcode",
  displayBarCodeSetWindow2: "icon-barcode",
  insertLineFeed: "icon-line-feed",
  insertPageFeed: "icon-page-feed",
  displaySeparatorSetWindow: "icon-separator",
  displaySpecialSymbolSetWindow: "icon-symbols",
  displayButtonSetWindow: "icon-button",
  insertComment: "icon-comment",
  deleteComment: "icon-delete-comment",
  insertReplyComment: "icon-reply-comment",
  deleteReplyComment: "icon-delete-reply-comment",
  deleteAllComment: "icon-clear-format",
  /***********************
   * printBar
   * **************************/
  cleanPrint: "icon-print",
  revisePrint: "icon-print",
  SelectPagePrint: "icon-print",
  SelectContentPrint: "icon-print",
  continuePrint: "icon-print",
  displayPrintSetWindow: "icon-print-machine",

  /***********************
   * printBar
   * **************************/
  cleanEdit: "icon-edit",
  reviseEdit: "icon-edit",
  cleanBrowser: "icon-browse",
  reviseBrowser: "icon-browse",
  pageSetting: "icon-page-set",
  /***********************
   * viewBar
   * **************************/
  viewScale100: "icon-view-100",
  viewSinglePage: "icon-single-page",
  viewMultiPages: "icon-multi-pages",
  viewFillViewWidth: "icon-fill-view-width",
};

文件Tab

export class ThinkEditorFileBar extends ThinkEditorComponent {
  constructor(options = {}) {
    super();
    var baseOptions = {
      iconUrlMap: iconUrlMap,
      iconMap: iconMap,
      items: {
        group1: [
          [
            {
              name: "保存",
              key: "saveDoc",
              type: "btnIcon",
              appendName: "bottom",
              // onClick: async (args) => {
              //   //由应用对接保存
              // },
            },
            {
              name: "打开文档",
              key: "openDoc",
              type: "btnIcon",
              appendName: "bottom",
              //@20251012 打开文档 涉及文档配置参数和显示位置，所以由应用处理
              // onClick: async (args) => {
              //   var docData = await PopFileSelector(".xml,");
              //   var docName = docData.fileName; //this.RandomString(9);
              //   var data = docData.data;

              //   var ret = await OpenDocMiniCodeAsync(this.editorInstance, this.config.thinkEditorKit, docName, data);
              //   if (!ret) {
              //     alert("打开文档失败！可能是选择的文件不是有效的信译文档！");
              //   }
              // },
            },
            {
              name: "新建文档",
              key: "newDoc",
              type: "btnIcon",
              appendName: "bottom",
              // onClick: async (args) => {
              //   this.NewDocMiniCode("新文档", E_DOC_TYPE.Entity);
              //   //或参照 "新建三测单" 打开1个事先准备好的文档
              // },
            },
            {
              name: "新建模板",
              key: "newTemplate",
              type: "btnIcon",
              appendName: "bottom",
              // onClick: async (args) => {
              //   this.NewDocMiniCode("新模板", E_DOC_TYPE.Template);
              //   //或参照 "新建三测单" 打开1个事先准备好的文档
              // },
            },
            {
              name: "新建三测单",
              key: "newTimeAxis",
              type: "btnIcon",
              appendName: "bottom",
              // onClick: async (args) => {
              //   var url = "/system/emr/TimeAxisTemplate.xml"; //"/system/test/pacsdemo.jpg";
              //   let response = await fetch(url, {
              //     credentials: "same-origin",
              //   });
              //   let data = await response.arrayBuffer();
              //   //response.arrayBuffer().then(data =>  {
              //   var docName = "三测单" + ((Math.random() * 1000000) | 0);
              //   let ret = await this.OpenDocMiniCodeAsync(docName, data);
              //   if (!ret) {
              //     alert(`打开文档失败！可能是服务器没有正确部署测试文件：${url}！`);
              //   }
              // },
            },
          ],
        ],
        group2: [
          [
            {
              name: "导出XML",
              key: "exportXml",
              type: "btnIcon",
              appendName: "bottom",
              onClick: async (args) => {
                var docData = this.thinkEditor?.GetDoc(E_DOC_FORMAT.XML, E_DOC_TYPE.Entity, { formatPretty: true });
                ShowSaveFileDialog("thinkeditor.xml", docData);
              },
            },
            {
              name: "导出模板",
              key: "exportTemplate",
              type: "btnIcon",
              appendName: "bottom",
              onClick: async (args) => {
                var docData = this.thinkEditor?.GetDoc(E_DOC_FORMAT.XML, E_DOC_TYPE.Template, {
                  formatPretty: true,
                  source: true,
                  inputText: true,
                  inputNumber: true,
                  selectOption: true,
                  selectDateTime: true,
                });
                ShowSaveFileDialog("thinkeditorTemplate.xml", docData);
              },
            },
            {
              name: "导出HTML",
              key: "exportHtml",
              type: "btnIcon",
              appendName: "bottom",
              onClick: async (args) => {
                var dataBuffer = this.thinkEditor?.GetDoc(E_DOC_FORMAT.HTML, E_DOC_TYPE.Entity);
                ShowSaveFileDialog("thinkeditor.html", dataBuffer);
              },
            },
            {
              name: "导出PDF",
              key: "exportPdf",
              type: "btnIcon",
              appendName: "bottom",
              onClick: async (args) => {
                var dataBuffer = await this.thinkEditor?.GetPDF({});
                ShowSaveFileDialog("thinkeditor.pdf", dataBuffer);
              },
            },
            {
              name: "导出图片",
              key: "exportImg",
              type: "btnIcon",
              appendName: "bottom",
              onClick: async (args) => {
                var dataBuffer = this.thinkEditor?.GetPagesImage(E_IMAGE_TYPE.JPG, 0, 0, 1.5);
                ShowSaveFileDialog("thinkeditor.jpg", dataBuffer);
              },
            },
            {
              name: "导出JSON",
              key: "exportJson",
              type: "btnIcon",
              appendName: "bottom",
              onClick: async (args) => {
                var outline = this.thinkEditor.GetOutline({});
                ShowSaveFileDialog("thinkeditor.json", JSON.stringify(outline));
              },
            },
          ],
        ],
      },
    };

    this.setOptions(baseOptions, options); // 调用父类的constructor
  }
}

编辑Tab

export class ThinkEditorEditBar extends ThinkEditorComponent {
  constructor(options = {}) {
    super();

    let fontInfoList = [];
    if (options.fontInfoList && options.fontInfoList.length > 0) {
      options.fontInfoList.forEach((fontInfo) => {
        fontInfoList.push({
          name: fontInfo.fontName,
          value: fontInfo.family,
        });
      });
    }

    var baseOptions = {
      iconUrlMap: iconUrlMap,
      iconMap: iconMap,
      items: {
        group1: [
          [
            {
              name: "清除格式",
              key: "clearFormat",
              type: "btnIcon",
              //appendName: "bottom",
              onClick: (args) => {
                this.thinkEditor?.ClearFormat();
              },
            },
            {
              name: "格式化",
              key: "formatBrush",
              type: "btnIcon",
              actionType: "toggle",
              onClick: (args) => {
                this.thinkEditor?.SetFormatBrush(args.value ? 1 : 0);
              },
            },
            {
              name: "撤销",
              key: "undo",
              type: "btnIcon",
              icon: "undo",
              actionType: "toggle",
              onClick: (args) => {
                this.thinkEditor?.Undo(1);
              },
            },
            {
              name: "回退",
              key: "redo",
              type: "btnIcon",
              icon: "redo",
              actionType: "toggle",
              onClick: (args) => {
                this.thinkEditor?.Redo(1);
              },
            },
          ],
          [
            {
              name: "复制",
              key: "copy",
              type: "btnIcon",
              onClick: (args) => {
                this.thinkEditor?.Copy();
              },
            },
            {
              name: "剪切",
              key: "cut",
              type: "btnIcon",
              onClick: (args) => {
                this.thinkEditor?.Cut();
              },
            },
            {
              name: "粘贴",
              key: "paste",
              type: "selectIcon",
              eventSeparate: true,
              list: [
                { name: "带格式粘贴", value: 0 },
                { name: "粘贴文本", value: 1 },
              ],
              //render: () => {
              //return "<span>😘</span>";
              //},
              onClick: (args) => {
                this.thinkEditor?.Paste(0);
              },
              onChange: (args) => {
                this.thinkEditor?.Paste(args.value);
              },
            },
          ],
        ],
        // 图标按钮
        group2: [
          [
            {
              name: "字体",
              key: "fontName",
              type: "select",
              placeholder: "宋体",
              width: 120,
              border: true,
              trigger: "click",
              list: fontInfoList,
              optionRender: (item) => {
                return `<span style="font-family: ${item.value}">${item.name}</span>`;
              },
              onChange: (args) => {
                this.thinkEditor?.SetFontType(args.name);
              },
            },
            {
              name: "字号",
              key: "fontSize",
              type: "select",
              placeholder: "小四",
              width: 60,
              trigger: "click",
              list: fontSizeList,
              onChange: (args) => {
                this.thinkEditor?.SetFontSizeItem(args.name);
              },
            },
            {
              name: "套圈",
              key: "ferrule",
              type: "selectIcon",
              placeholder: "",
              width: 40,
              trigger: "click",
              highlightValue: [1, 2], // 高亮对应的下拉值，不传下拉选中均会高亮
              list: [
                { name: "无", value: 0 },
                { name: "圆形套圈", value: 1 },
                { name: "方形套圈", value: 2 },
              ],
              onChange: (args) => {
                this.thinkEditor?.SetFontFerrule(args.value);
              },
            },
          ],
          [
            {
              name: "加粗",
              key: "bold",
              type: "btnIcon",
              icon: "bold",
              actionType: "toggle",
              onClick: (args) => {
                this.thinkEditor?.SetFontBold(-1);
              },
            },
            {
              name: "倾斜",
              key: "italic",
              type: "btnIcon",
              icon: "italic",
              actionType: "toggle",
              onClick: (args) => {
                this.thinkEditor?.SetFontItalic(-1);
              },
            },
            {
              name: "下划线",
              key: "underline",
              type: "btnIcon",
              icon: "underline",
              actionType: "toggle",
              onClick: (args) => {
                this.thinkEditor?.SetFontUnderline(-1);
              },
            },
            {
              name: "删除线",
              key: "strikethrough",
              type: "btnIcon",
              icon: "strikethrough",
              actionType: "toggle",
              onClick: (args) => {
                this.thinkEditor?.SetFontStrikethrough(-1);
              },
            },
            {
              name: "文字颜色",
              key: "fontColor",
              type: "selectColorText",
              defaultValue: "#FFFFFF",
              list: [], // list传入可选的颜色，传空或不传，则为默认颜色
              render: () => {
                return "<span>选择颜色</span>";
              },
              // 处理确定按钮的逻辑
              onOk: (value, selectIns) => {
                if (!value) {
                  showTipInfo("请输入颜色！！！");
                } else {
                  selectIns.hide();
                }
              },
              // 处理选定后关闭下拉框的回调
              onChange: (args) => {
                let colorStr = args.value.substring(1); //#F1F2F3
                this.thinkEditor?.SetFontColor(colorStr);
              },
            },
            {
              name: "选择背景颜色",
              key: "fontBackColor",
              type: "selectColorBg",
              list: [], // list传入可选的颜色，传空或不传，则为默认颜色 // 处理确定按钮的逻辑
              onOk: (value, selectIns) => {
                if (!value) {
                  showTipInfo("请输入颜色！！！");
                } else {
                  selectIns.hide();
                }
              },
              // 处理选定后关闭下拉框的回调
              onChange: (args) => {
                let bgColorStr = "00000000"; //透明背景色
                if (args.value != "") {
                  bgColorStr = "FF" + args.value.substring(1); //#F1F2F3
                }

                this.thinkEditor?.SetFontBackColor(bgColorStr);
              },
            },
            {
              name: "上标",
              key: "superScript",
              type: "btnIcon",
              icon: "superScript",
              actionType: "toggle",
              onClick: (args) => {
                this.thinkEditor?.SetFontScript(args.value ? 1 : 0);
              },
            },
            {
              name: "下标",
              key: "subScript",
              type: "btnIcon",
              icon: "subScript",
              actionType: "toggle",
              onClick: (args) => {
                this.thinkEditor?.SetFontScript(args.value ? 2 : 0);
              },
            },
          ],
        ],
        // 下拉选择, select、selectIcon、selectColor、selectColorText、selectColorBg
        group3: [
          [
            {
              name: "左对齐",
              key: "alignHorizontalLeft",
              type: "btnIcon",
              icon: "alignHorizontalLeft",
              actionType: "toggle",
              onClick: (args) => {
                if (args.value == 1) {
                  this.thinkEditor?.SetParagraphAlignContent(0);
                  this.SyncParagraphStyleEffect(0);
                }
              },
            },
            {
              name: "居中对齐",
              key: "alignHorizontalCenter",
              type: "btnIcon",
              icon: "alignHorizontalCenter",
              actionType: "toggle",
              onClick: (args) => {
                if (args.value == 1) {
                  this.thinkEditor?.SetParagraphAlignContent(1);
                  this.SyncParagraphStyleEffect(1);
                }
              },
            },
            {
              name: "右对齐",
              key: "alignHorizontalRight",
              type: "btnIcon",
              icon: "alignHorizontalRight",
              actionType: "toggle",
              onClick: (args) => {
                if (args.value == 1) {
                  this.thinkEditor?.SetParagraphAlignContent(2);
                  this.SyncParagraphStyleEffect(2);
                }
              },
            },
            {
              name: "两端对齐",
              key: "alignHorizontalJustify",
              type: "btnIcon",
              icon: "alignHorizontalJustify",
              actionType: "toggle",
              onClick: (args) => {
                if (args.value == 1) {
                  this.thinkEditor?.SetParagraphAlignContent(3);
                  this.SyncParagraphStyleEffect(3);
                }
              },
            },
            {
              name: "分散对齐",
              key: "alignHorizontalDistribute",
              type: "btnIcon",
              icon: "alignHorizontalDistribute",
              actionType: "toggle",
              onClick: (args) => {
                if (args.value == 1) {
                  this.thinkEditor?.SetParagraphAlignContent(4);
                  this.SyncParagraphStyleEffect(4);
                }
              },
            },
          ],
          [
            {
              name: "锁定框选内容",
              key: "selectedLocked",
              type: "selectIcon",
              highlightValue: [1], // 高亮对应的下拉值，不传下拉选中均会高亮
              // despText: "锁定内容",
              //render: () => {
              //return "<span>😘</span>";
              //},
              list: [
                { name: "解锁", value: 0 },
                { name: "锁定", value: 1 },
              ],
              onChange: (args) => {
                this.thinkEditor?.SetSelectContentLock(args.value, {});
              },
            },
          ],
        ],
        group4: [
          [
            {
              name: "查找替换",
              key: "searchReplace",
              type: "btnIcon",
              appendName: "bottom",
              onClick: (args) => {
                this.thinkEditor?.DisplaySearchReplaceWindow(1 /*E_DISPLAY_MODE.Show*/);
              },
            },
            {
              name: "打印",
              key: "cleanPrint",
              type: "btnIcon",
              appendName: "bottom",
              onClick: async (args) => {
                await this.thinkEditor?.PrintDocAsync({
                  view: {
                    mode: E_VIEW_MODE.Print,
                    hideElementHint: true,
                  },
                });
              },
            },
          ],
        ],
      },
    };

    this.setOptions(baseOptions, options); // 调用父类的constructor

    let editorInstance = this.editorInstance;

    this._OnUndoCountChange = this.OnUndoCountChange.bind(this);
    this._OnRedoCountChange = this.OnRedoCountChange.bind(this);
    this._OnFormatBrushChange = this.OnFormatBrushChange.bind(this);
    this._OnFontFormatChange = this.OnFontFormatChange.bind(this);
    this._OnParagraphStyleChange = this.OnParagraphStyleChange.bind(this);

    editorInstance.addEventListener("undoCountChange", this._OnUndoCountChange);
    editorInstance.addEventListener("redoCountChange", this._OnRedoCountChange);
    editorInstance.addEventListener("formatBrushChange", this._OnFormatBrushChange);
    editorInstance.addEventListener("fontFormat", this._OnFontFormatChange);
    editorInstance.addEventListener("paragraphStyle", this._OnParagraphStyleChange);
  }

  OnFontFormatChange(e) {
    let data = e.data.data;

    this.setValue({ key: "fontName", value: data.fontName });
    this.setValue({ key: "fontSize", value: data.fontSizeItem });
    this.setValue({ key: "ferrule", value: data.ferrule == "1" || data.ferrule === 1 });
    this.setValue({ key: "bold", value: data.bold == "1" || data.bold === 1 });
    this.setValue({ key: "italic", value: data.italic == "1" || data.italic === 1 });
    this.setValue({ key: "underline", value: data.underline == "1" || data.underline === 1 });
    this.setValue({ key: "strikethrough", value: data.strikethrough == "1" || data.strikethrough === 1 });

    let fontColorStr = "";
    if (data.color != null) {
      fontColorStr = "#" + data.color.slice(2);
    } else {
      //框选范围字体颜色不一样场景
      //console.error(e);
    }
    this.setValue({ key: "fontColor", value: fontColorStr });

    let fontBackColorStr = ""; //透明
    if (data.backColor != null) {
      const isFF = data.backColor.substring(0, 2).toLowerCase() === "ff";
      if (isFF) {
        //不透明
        fontBackColorStr = "#" + data.backColor.slice(2);
      }
    } else {
      //框选范围背景颜色不一样场景
    }
    this.setValue({ key: "fontBackColor", value: fontBackColorStr });

    const script = data.script;
    if (script == 1) {
      this.setValue({ key: "superScript", value: 1 });
      this.setValue({ key: "subScript", value: 0 });
    } else if (script == 2) {
      this.setValue({ key: "superScript", value: 0 });
      this.setValue({ key: "subScript", value: 1 });
    } else {
      this.setValue({ key: "superScript", value: 0 });
      this.setValue({ key: "subScript", value: 0 });
    }
  }
  SyncParagraphStyleEffect(alignHorizontalMode) {
    this.setValue({ key: "alignHorizontalLeft", value: alignHorizontalMode == 0 ? 1 : 0 });
    this.setValue({ key: "alignHorizontalCenter", value: alignHorizontalMode == 1 ? 1 : 0 });
    this.setValue({ key: "alignHorizontalRight", value: alignHorizontalMode == 2 ? 1 : 0 });
    this.setValue({ key: "alignHorizontalJustify", value: alignHorizontalMode == 3 ? 1 : 0 });
    this.setValue({ key: "alignHorizontalDistribute", value: alignHorizontalMode == 4 ? 1 : 0 });
  }
  OnParagraphStyleChange(e) {
    let data = e.data.data;
    this.SyncParagraphStyleEffect(data.alignHorizontalMode);
  }
  OnUndoCountChange(e) {
    let cnt = e.data.data.code;
    this.setValue({ key: "undo", value: cnt > 0 ? 1 : 0 });
  }
  OnRedoCountChange(e) {
    let cnt = e.data.data.code;
    this.setValue({ key: "redo", value: cnt > 0 ? 1 : 0 });
  }
  OnFormatBrushChange(e) {
    let brushState = e.data.data.code;
    this.setValue({ key: "formatBrush", value: brushState > 0 ? 1 : 0 });
  }
}

插入Tab

export class ThinkEditorInsertBar extends ThinkEditorComponent {
  constructor(options = {}) {
    super();
    var baseOptions = {
      iconUrlMap: iconUrlMap,
      iconMap: iconMap,
      items: {
        group1: [
          [
            // 按钮类型-默认
            {
              name: "元素",
              key: "displayElementSetWindow",
              type: "btnIcon",
              appendName: "bottom",
              onClick: (args) => {
                this.thinkEditor?.DisplayElementSetWindow(E_DISPLAY_MODE.Show, E_SET_MODE.InsertCommon);
              },
            },
            // 按钮类型-直传事件
            {
              name: "选框",
              key: "displayCheckBoxSetWindow",
              type: "btnIcon",
              appendName: "bottom",
              onClick: (args) => {
                this.thinkEditor?.DisplayCheckBoxSetWindow(E_DISPLAY_MODE.Show, E_SET_MODE.InsertCommon);
              },
            },
            {
              name: "公式",
              key: "displayFormulaSetWindow",
              type: "btnIcon",
              appendName: "bottom",
              onClick: (args) => {
                this.thinkEditor?.DisplayFormulaSetWindow(E_DISPLAY_MODE.Show, E_SET_MODE.InsertCommon);
              },
            },
            {
              name: "表格",
              key: "inserTablePicker",
              type: "btnIcon",
              appendName: "bottom",
              dropActionName: "selectTable", // 下拉操作类型
              onSelect: ({ value }) => {
                this.thinkEditor?.InsertTable({ rowsCount: value.row, colsCount: value.col });
              },
            },
            {
              name: "图片",
              key: "selectInsertImage",
              type: "btnIcon",
              appendName: "bottom",
              onClick: async (args) => {
                var imgData = await PopFileSelector(".png,.jpg.jpeg,.svg,");
                var imgName = imgData.fileName; //this.RandomString(9);
                var data = imgData.data;

                this.thinkEditor?.InsertImage("", 0, 0, imgName, data, data.byteLength, {});
              },
            },
            {
              name: "页码",
              key: "displayPageNumSetWindow",
              type: "btnIcon",
              appendName: "bottom",
              onClick: (args) => {
                this.thinkEditor?.DisplayPageNumSetWindow(E_DISPLAY_MODE.Show, E_SET_MODE.InsertCommon);
              },
            },
            {
              name: "二维码",
              key: "displayBarCodeSetWindow1",
              type: "btnIcon",
              appendName: "bottom",
              onClick: (args) => {
                this.thinkEditor?.DisplayBarCodeSetWindow(E_DISPLAY_MODE.Show, E_SET_MODE.InsertCommon);
              },
            },
            {
              name: "条形码",
              key: "displayBarCodeSetWindow2",
              type: "btnIcon",
              appendName: "bottom",
              onClick: (args) => {
                this.thinkEditor?.DisplayBarCodeSetWindow(E_DISPLAY_MODE.Show, E_SET_MODE.InsertSpecial);
              },
            },
          ],
        ],
        group2: [
          [
            {
              name: "换行符",
              key: "insertLineFeed",
              type: "btnIcon",
              appendName: "bottom",
              onClick: (args) => {
                this.thinkEditor?.InsertLineFeed(1);
              },
            },
            {
              name: "分页符",
              key: "insertPageFeed",
              type: "btnIcon",
              appendName: "bottom",
              onClick: (args) => {
                this.thinkEditor?.InsertPageFeed(1);
              },
            },
            {
              name: "分隔线",
              key: "displaySeparatorSetWindow",
              type: "btnIcon",
              appendName: "bottom",
              onClick: (args) => {
                this.thinkEditor?.DisplaySeparatorSetWindow(E_DISPLAY_MODE.Show);
              },
            },
            {
              name: "特殊符号",
              key: "displaySpecialSymbolSetWindow",
              type: "btnIcon",
              appendName: "bottom",
              onClick: (args) => {
                this.thinkEditor?.DisplaySpecialSymbolSetWindow(E_DISPLAY_MODE.Show);
              },
            },
            {
              name: "按钮",
              key: "displayButtonSetWindow",
              type: "btnIcon",
              appendName: "bottom",
              onClick: (args) => {
                //let buttonId = GetRandStr();
                //this.thinkEditor?.InsertButton({ id: buttonId, text: "自定义按钮", action: "自定义事件名" });
                this.thinkEditor?.DisplayButtonSetWindow(E_DISPLAY_MODE.Show, E_SET_MODE.InsertCommon);
              },
            },
          ],
        ],
        group3: [
          [
            {
              name: "插入批注",
              key: "insertComment",
              type: "btnIcon",
              appendName: "bottom",
              onClick: (args) => {
                //判断是否显示批注信息框

                let commentId = this.thinkEditor?.InsertComment("", "", { useDefaultStyle: true });
                if (commentId == "") {
                  alert("插入批注失败！请确保插入点已选择到正文中！");
                  return;
                }
                let docProperties = this.thinkEditor?.GetDocProperties();
                if (docProperties.view.mode != E_VIEW_MODE.Edit || docProperties.comment.displayCommentInfobox != true) {
                  this.thinkEditor?.SetViewMode(E_VIEW_MODE.Edit, {
                    hideElementHint: false,
                    displayEditAuxiliary: true,
                    displaySelectionEffect: true,
                    displayReviseAuxiliary: true,
                    displayReviseDel: true,
                    displayQCInfobox: true,
                    displayCommentInfobox: true, //显示批注信息面板
                    displayQCBgMode: true,
                    displayCommentBgMode: true,
                  });
                }
              },
            },
            {
              name: "删除批注",
              key: "deleteComment",
              type: "btnIcon",
              appendName: "bottom",
              onClick: (args) => {
                //'' 删除当前选中批注
                let ret = this.thinkEditor?.DeleteComment("", {});
                if (!ret) {
                  alert("删除批注失败！请确保删除点已选择到批注中！");
                }
              },
            },
            {
              name: "插入答复",
              key: "insertReplyComment",
              type: "btnIcon",
              appendName: "bottom",
              onClick: (args) => {
                let ret = this.thinkEditor?.InsertReplyComment("", {});
                if (!ret) {
                  alert("插入批注答复失败！请确保插入点已选择到批注中！");
                }
              },
            },
            {
              name: "删除答复",
              key: "deleteReplyComment",
              type: "btnIcon",
              appendName: "bottom",
              onClick: (args) => {
                let ret = this.thinkEditor?.DeleteReplyComment({});
                if (!ret) {
                  alert("删除批注答复失败！请确保删除点已选择到批注中！");
                }
              },
            },
            {
              name: "清空批注",
              key: "deleteAllComment",
              type: "btnIcon",
              appendName: "bottom",
              onClick: (args) => {
                let ret = this.thinkEditor?.DeleteComment({ deleteAll: true });
                if (!ret) {
                  alert("删除批注答复失败！请确保删除点已选择到批注中！");
                }
              },
            },
          ],
        ],
      },
    };

    this.setOptions(baseOptions, options); // 调用父类的constructor
  }
}

打印Tab

export class ThinkEditorPrintBar extends ThinkEditorComponent {
  constructor(options = {}) {
    super();
    var baseOptions = {
      iconUrlMap: iconUrlMap,
      iconMap: iconMap,
      items: {
        group1: [
          [
            {
              name: "整洁打印",
              key: "cleanPrint",
              type: "btnIcon",
              appendName: "bottom",
              onClick: async (args) => {
                await this.thinkEditor?.PrintDocAsync({
                  view: {
                    mode: E_VIEW_MODE.Print,
                    hideElementHint: true,
                  },
                });
              },
            },
            {
              name: "审阅打印",
              key: "revisePrint",
              type: "btnIcon",
              appendName: "bottom",
              onClick: async (args) => {
                await this.thinkEditor?.PrintDocAsync({
                  view: {
                    mode: E_VIEW_MODE.Print,
                    hideElementHint: true,
                    displayEditAuxiliary: false,
                    displaySelectionEffect: false,
                    displayReviseAuxiliary: true,
                    displayReviseDel: true,
                    displayQCInfobox: false,
                    displayCommentInfobox: false,
                    displayQCBgMode: true,
                    displayCommentBgMode: true,
                  },
                });
              },
            },

            {
              name: "打印选择页",
              key: "SelectPagePrint",
              type: "btnIcon",
              appendName: "bottom",
              onClick: async (args) => {
                await this.thinkEditor?.PrintDocAsync({
                  view: {
                    mode: E_VIEW_MODE.SelectPagePrint,
                    hideElementHint: true,
                  },
                });
              },
            },
            {
              name: "选择打印",
              key: "SelectContentPrint",
              type: "btnIcon",
              appendName: "bottom",
              onClick: async (args) => {
                await this.thinkEditor?.PrintDocAsync({
                  view: {
                    mode: E_VIEW_MODE.SelectContentPrint,
                  },
                });
              },
            },
            {
              name: "续打",
              key: "continuePrint",
              type: "btnIcon",
              appendName: "bottom",
              onClick: async (args) => {
                await this.thinkEditor?.PrintDocAsync({
                  view: {
                    mode: E_VIEW_MODE.ContinuePrint,
                  },
                });
              },
            },
          ],
        ],
        group2: [
          [
            {
              name: "自定义打印",
              key: "displayPrintSetWindow",
              type: "btnIcon",
              appendName: "bottom",
              onClick: async (args) => {
                this.thinkEditor?.DisplayPrintSetWindow(E_DISPLAY_MODE.Show, { view: { mode: E_VIEW_MODE.Print } });
              },
            },
          ],
        ],
      },
    };

    this.setOptions(baseOptions, options); // 调用父类的constructor
  }
}

视图Tab

export class ThinkEditorViewBar extends ThinkEditorComponent {
  constructor(options = {}) {
    super();
    var baseOptions = {
      iconUrlMap: iconUrlMap,
      iconMap: iconMap,
      items: {
        group1: [
          [
            {
              name: "整洁编辑",
              key: "cleanEdit",
              type: "btnIcon",
              appendName: "bottom",
              onClick: async (args) => {
                this.thinkEditor.SetEditBehavior({
                  enablePermission: false,
                  enableRevise: false,
                });
                this.thinkEditor?.SetViewMode(E_VIEW_MODE.Edit, {
                  hideElementHint: false,
                });
              },
            },
            {
              name: "审阅编辑",
              key: "reviseEdit",
              type: "btnIcon",
              appendName: "bottom",
              onClick: async (args) => {
                let currentAuthor = this.thinkEditor?.GetCurrentAuthorInfo();
                if (currentAuthor == null) {
                  alert("未设置当前编辑者无法使用痕迹模式，请在NewDoc/CreateDoc/ParseDoc任一方法创建Doc后使用SetCurrentAuthorInfo设置！");
                  return;
                }
                this.thinkEditor.SetEditBehavior({
                  enablePermission: false,
                  enableRevise: true,
                  modifySameLevel: true,
                  fristEditByRevise: true,
                  modifyOwnerOldByRevise: true,
                  initialContentNotBelongCreator: false,
                });
                this.thinkEditor?.SetViewMode(E_VIEW_MODE.Edit, {
                  hideElementHint: false,
                  displayEditAuxiliary: true,
                  displaySelectionEffect: true,
                  displayReviseAuxiliary: true,
                  displayReviseDel: true,
                  displayQCInfobox: true,
                  displayCommentInfobox: true,
                  displayQCBgMode: true,
                  displayCommentBgMode: true,
                });
              },
            },
            {
              name: "整洁浏览",
              key: "cleanBrowser",
              type: "btnIcon",
              appendName: "bottom",
              onClick: async (args) => {
                this.thinkEditor.SetEditBehavior({
                  enablePermission: false,
                  enableRevise: false,
                });
                this.thinkEditor?.SetViewMode(E_VIEW_MODE.Browse, {
                  hideElementHint: true,
                });
              },
            },
            {
              name: "审阅浏览",
              key: "reviseBrowser",
              type: "btnIcon",
              appendName: "bottom",
              onClick: async (args) => {
                this.thinkEditor?.SetViewMode(E_VIEW_MODE.Browse, {
                  hideElementHint: true,
                  displayEditAuxiliary: true,
                  displaySelectionEffect: true,
                  displayReviseAuxiliary: true,
                  displayReviseDel: true,
                  displayQCInfobox: false,
                  displayCommentInfobox: false,
                  displayQCBgMode: true,
                  displayCommentBgMode: true,
                });
              },
            },
          ],
        ],
        group2: [
          [
            {
              name: "页面设置",
              key: "pageSetting",
              type: "btnIcon",
              appendName: "bottom",
              onClick: async (args) => {
                this.thinkEditor?.DisplayPageSetWindow(E_DISPLAY_MODE.Show);
              },
            },
          ],
        ],
        group3: [
          [
            {
              name: "显示段落符",
              key: "displayCarriageReturn",
              type: "checkbox",
              style: "switch",
              list: [
                { name: "显示段落符", value: 1 },
                // { name: "选项2", value: "v2" },
                // { name: "选项3", value: "v3" },
              ],
              // 可直传
              onChange: (args) => {
                //console.log("直传onChange", args);
                this.thinkEditor?.SetDocConfig("", { displayCarriageReturn: args.value.checked });
              },
            },
            {
              name: "表单模式",
              key: "strictEdit",
              type: "checkbox",
              style: "switch",
              list: [
                { name: "表单模式", value: 1 },
                // { name: "选项2", value: "v2" },
                // { name: "选项3", value: "v3" },
              ],
              // 可直传
              onChange: (args) => {
                //console.log("直传onChange", args);
                this.thinkEditor?.SetDocConfig("", { strictEdit: args.value.checked });
              },
            },
            ,
            {
              name: "护眼模式",
              key: "eyeCare",
              type: "checkbox",
              style: "switch",
              list: [{ name: "护眼模式", value: 1 }],
              // 可直传
              onChange: (args) => {
                if (args.value.checked) {
                  //页面背景色
                  this.thinkEditor?.SetBackgroundColor(RGBA2Color({ a: 1, r: 215, g: 231, b: 218 })); //"ffCFE8D2"); //207 232 210
                  //页面之外背景色
                  // this.thinkEditor?.SetEditorConfig({ pagesBackColor: RGBA2Color({ a: 1, r: 215, g: 231, b: 218 }) }); //'ffD7E7DA'215 231 218
                } else {
                  //页面背景色
                  this.thinkEditor?.SetBackgroundColor(RGBA2Color({ a: 1, r: 255, g: 255, b: 255 }));
                  //页面之外背景色
                  this.thinkEditor?.SetEditorConfig({ pagesBackColor: RGBA2Color({ a: 1, r: 226, g: 235, b: 239 }) }); //'ffB0B0B0'
                }
              },
            },
          ],
          [
            {
              name: "痕迹", //标识了同1组。组内目前都是单选
              key: "reviseEdit",
              type: "checkbox",
              style: "radio", //switch、radio、checkbox
              list: [
                { name: "显痕编辑", value: 1 },
                { name: "隐痕编辑", value: 2 },
                { name: "无痕编辑", value: 3 },
              ],
              // 可直传
              onChange: (args) => {
                //console.log("直传onChange", args);
                if (args.value.value == 1) {
                  let currentAuthor = this.thinkEditor?.GetCurrentAuthorInfo();
                  if (currentAuthor == null) {
                    alert("未设置当前编辑者无法使用痕迹模式，请在NewDoc/CreateDoc/ParseDoc任一方法创建Doc后使用SetCurrentAuthorInfo设置！");
                    return;
                  }
                  this.thinkEditor.SetEditBehavior({
                    enablePermission: false,
                    enableRevise: true,
                    modifySameLevel: true,
                    fristEditByRevise: true,
                    modifyOwnerOldByRevise: true,
                    initialContentNotBelongCreator: false,
                  });
                  this.thinkEditor?.SetViewMode(E_VIEW_MODE.Edit, { displayReviseAuxiliary: true, displayReviseDel: true });
                }
                if (args.value.value == 2) {
                  let currentAuthor = this.thinkEditor?.GetCurrentAuthorInfo();
                  if (currentAuthor == null) {
                    alert("未设置当前编辑者无法使用痕迹模式，请在NewDoc/CreateDoc/ParseDoc任一方法创建Doc后使用SetCurrentAuthorInfo设置！");
                    return;
                  }
                  this.thinkEditor.SetEditBehavior({
                    enablePermission: false,
                    enableRevise: true,
                    modifySameLevel: true,
                    fristEditByRevise: true,
                    modifyOwnerOldByRevise: true,
                    initialContentNotBelongCreator: false,
                  });
                  this.thinkEditor?.SetViewMode(E_VIEW_MODE.Edit, { displayReviseAuxiliary: false, displayReviseDel: false });
                }
                if (args.value.value == 3) {
                  this.thinkEditor?.SetEditorInfo("pc", "12666", "admin", 1, { note: "上级医师审阅修改" });
                  this.thinkEditor.SetEditBehavior({
                    enablePermission: false,
                    enableRevise: false,
                    modifySameLevel: false,
                    fristEditByRevise: false,
                    modifyOwnerOldByRevise: false,
                    initialContentNotBelongCreator: false,
                  });
                  this.thinkEditor?.SetViewMode(E_VIEW_MODE.Edit);
                }
              },
            },
          ],
        ],
        group4: [
          [
            {
              name: "100%",
              key: "viewScale100",
              type: "btnIcon",
              appendName: "right",
              onClick: async (args) => {
                this.thinkEditor?.SetDisplayScale(E_PAGES_LAYOUT_MODE.Ratio, 1.0);
              },
            },
            {
              name: "页宽",
              key: "viewFillViewWidth",
              type: "btnIcon",
              appendName: "right",
              onClick: async (args) => {
                this.thinkEditor?.SetDisplayScale(E_PAGES_LAYOUT_MODE.FillViewWidth);
              },
            },
          ],
          [
            {
              name: "单页",
              key: "viewSinglePage",
              type: "btnIcon",
              appendName: "right",
              onClick: async (args) => {
                this.thinkEditor?.SetDisplayScale(E_PAGES_LAYOUT_MODE.SinglePage);
              },
            },
            {
              name: "多页",
              key: "viewMultiPages",
              type: "btnIcon",
              appendName: "right",
              onClick: async (args) => {
                this.thinkEditor?.SetDisplayScale(E_PAGES_LAYOUT_MODE.MultiPages);
              },
            },
          ],
        ],
      },
    };

    this.setOptions(baseOptions, options); // 调用父类的constructor
  }
}