import htmlContent from "../htmlEditor/htmlContent.js";

let backList = [],
  recoverList = [];
const headerClickFun = {
  //点击事件，展开html代码
  showHtml: (e, domId) => {
    let list = e.target.parentNode.children;
    //将节点列表（NodeList）转化为数组
    let classList = Array.prototype.slice.call(e.target.classList, 0);
    let isSelected = true;
    if (classList.includes("rich-text-outicon-selected")) {
      //取消选中
      e.target.classList.remove("rich-text-outicon-selected");
      isSelected = false;
    } else {
      //选择
      e.target.classList.add("rich-text-outicon-selected");
    }
    for (let i = 0; i < list.length; i++) {
      if (isSelected && list[i].getAttribute("data-type") !== "showHtml") {
        list[i].style.opacity = 0.5;
        list[i].style.cursor = "default";
      } else if (list[i].getAttribute("data-type") !== "showHtml") {
        list[i].style.opacity = 1;
        list[i].style.cursor = "pointer";
      }
    }
    let iframe = document.getElementById(domId + "-iframe"),
      textarea = document.getElementById(domId + "-textarea");
    // textarea.onchange = null;
    if (isSelected) {
      let html = htmlContent.getHtml(domId);
      iframe.style.display = "none";
      textarea.style.display = "block";
      textarea.value = html;
      // textarea.onchange = (e) => {

      //   htmlContent.setHtml(e.target.value);
      // };
    } else {
      iframe.style.display = "block";
      textarea.style.display = "none";
      htmlContent.setHtml(domId, textarea.value);
      textarea.value = "";
    }
  },
  //后退事件
  doBack: (e, domId) => {
    let doc = document.getElementById(domId + "-iframe").contentDocument;
    doc.body.focus();
    doc.execCommand("undo");
    return;
    let list = document.getElementById(domId + "-iframe").contentWindow
      .backDataList;
    let len = list.length;

    if (len === 1) {
      htmlContent.setHtml(domId, "");
    } else {
      htmlContent.setHtml(domId, list[len - 2]);
      document
        .getElementById(domId + "-iframe")
        .contentWindow.recoverDataList.unshift(list[len - 1]);
      document
        .getElementById(domId + "-iframe")
        .contentWindow.backDataList.splice(len - 1);
    }
  },
  //前进事件
  doRecover: (e, domId) => {
    let doc = document.getElementById(domId + "-iframe").contentDocument;
    doc.body.focus();
    doc.execCommand("redo");
    return;
    let list = document.getElementById(domId + "-iframe").contentWindow
      .recoverDataList;
    let len = list.length;

    if (len > 0) {
      htmlContent.setHtml(domId, list[0]);
      document
        .getElementById(domId + "-iframe")
        .contentWindow.backDataList.push(list[0]);
      document
        .getElementById(domId + "-iframe")
        .contentWindow.recoverDataList.splice(0, 1);
    }
  },
  //打印机事件
  doPrint: (e, domId) => {
    let features =
      "fullscreen=no,height=500, width=800, top=100, left=100, toolbar=no, menubar=no,scrollbars=no,resizable=no, location=no, status=no"; //设置新窗口的特性
    let newWindow = window.open("打印窗口", "_blank", features);
    let docStr = document.getElementById(domId + "-iframe").contentDocument.body
      .innerHTML; //htmlContent.getHtml(domId);
    newWindow.document.write(docStr);
    newWindow.document.close();
    newWindow.print();
    newWindow.close();
  },
  //剪切
  doCut: (e, domId) => {
    //let win = document.getElementById(domId + "-iframe").contentWindow;
    let doc = document.getElementById(domId + "-iframe").contentDocument;
    //document.selection.createRange().text; // IE9以下使用
    // let selectText = win.getSelection
    //   ? win.getSelection().toString()
    //   : doc.selection.createRange().text;
    doc.execCommand("Cut");
  },
  //复制
  doCopy: (e, domId) => {
    let doc = document.getElementById(domId + "-iframe").contentDocument;
    doc.execCommand("Copy");
  },
  doPaste: (e, domId) => {
    let doc = document.getElementById(domId + "-iframe").contentDocument;
    doc.body.focus();
    try {
      //readText
      navigator.clipboard
        .readText()
        .then(async (v) => {
          //read()
          // for (const clipboardItem of v) {
          //   for (const type of clipboardItem.types) {
          //     const blob = await clipboardItem.getType(type);
          //     console.log(blob.text);
          //     //console.log(URL.createObjectURL(blob));
          //   }
          // }
          doc.execCommand("insertText", false, v);
        })
        .catch((v) => {
          console.log("doPaste获取剪贴板失败: ", v);
        });
    } catch (err) {
      console.error("Failed to read clipboard contents: ", err);
    }

    //doc.execCommand("Paste");
  },
  doPasteUnformat: (e, domId) => {
    let doc = document.getElementById(domId + "-iframe").contentDocument;
    doc.body.focus();
    try {
      navigator.clipboard
        .readText()
        .then((v) => {
          //console.log("doPaste获取剪贴板成功：", v);
          doc.execCommand("insertHtml", false, v);
        })
        .catch((v) => {
          console.log("doPaste获取剪贴板失败: ", v);
        });
    } catch (err) {
      console.error("Failed to read clipboard contents: ", err);
    }
  },
  //左对齐
  justifyLeft: (e, domId) => {
    let doc = document.getElementById(domId + "-iframe").contentDocument;
    doc.body.focus();
    doc.execCommand("justifyLeft");
  },
  justifyCenter: (e, domId) => {
    let doc = document.getElementById(domId + "-iframe").contentDocument;
    doc.body.focus();
    doc.execCommand("justifyCenter");
  },
  justifyRight: (e, domId) => {
    let doc = document.getElementById(domId + "-iframe").contentDocument;
    doc.body.focus();
    doc.execCommand("justifyRight");
  },
  justifyFull: (e, domId) => {
    let doc = document.getElementById(domId + "-iframe").contentDocument;
    doc.body.focus();
    doc.execCommand("justifyFull");
  },
  insertOrderedList: (e, domId) => {
    let doc = document.getElementById(domId + "-iframe").contentDocument;
    doc.body.focus();
    doc.execCommand("insertOrderedList");
  },
  insertUnorderedList: (e, domId) => {
    let doc = document.getElementById(domId + "-iframe").contentDocument;
    doc.body.focus();
    doc.execCommand("insertUnorderedList");
  },
  doIndent: (e, domId) => {
    let doc = document.getElementById(domId + "-iframe").contentDocument;
    doc.body.focus();
    doc.execCommand("indent");
  },
  doOutdent: (e, domId) => {
    let doc = document.getElementById(domId + "-iframe").contentDocument;
    doc.body.focus();
    doc.execCommand("outdent");
  },
  //下标
  doSubscript: (e, domId) => {
    let doc = document.getElementById(domId + "-iframe").contentDocument;
    doc.body.focus();
    doc.execCommand("subscript");
  },
  doSuperscript: (e, domId) => {
    let doc = document.getElementById(domId + "-iframe").contentDocument;
    doc.body.focus();
    doc.execCommand("superscript");
  },
  removeFormat: (e, domId) => {
    let doc = document.getElementById(domId + "-iframe").contentDocument;
    doc.body.focus();
    doc.execCommand("removeFormat");
  },
  selectAll: (e, domId) => {
    let doc = document.getElementById(domId + "-iframe").contentDocument;
    doc.body.focus();
    doc.execCommand("selectAll");
  },
  doHeading: (e, domId) => {
    e.target.style.position = "relative";
    let div = `<article   id="${domId}clickRemove"
              style="width:300px;height:100px;overflow:auto;padding:4px;background:#fff;position:absolute;bottom:-4px;left:-4px;z-index:99999;border:1px solid #a0a0a0;box-shadow:1px 1px 3px #a0a0a0;">
              <div id="${domId}doHeadingH1" style="font-weight:bold;font-size:20px;height:28px;line-height:28px;">标题1</div>
              <div id="${domId}doHeadingH2" style="font-weight:bold;font-size:18px;height:26px;line-height:26px;">标题2</div>
              <div id="${domId}doHeadingH3" style="font-weight:bold;font-size:16px;height:24px;line-height:24px;">标题3</div>
              <div id="${domId}doHeadingH4" style="font-weight:bold;font-size:14px;">标题4</div>
              <div id="${domId}doHeadingH0" style="font-size:12px;">正文</div>
            </article>`;
    e.target.innerHTML = div;
    let doc = document.getElementById(domId + "-iframe").contentDocument;
    doc.onclick = (e) => {
      let self = document.getElementById(`${domId}clickRemove`);
      if (self) {
        self.parentElement.removeChild(self);
      }
    };
    document.body.onclick = (e) => {
      if (e.target.dataset.type !== "doHeading") {
        if (e.target.id === `${domId}doHeadingH1`) {
          doc.body.focus();
          doc.execCommand("formatBlock", false, "h1");
        } else if (e.target.id === `${domId}doHeadingH2`) {
          doc.body.focus();
          doc.execCommand("formatBlock", false, "h2");
        } else if (e.target.id === `${domId}doHeadingH3`) {
          doc.body.focus();
          doc.execCommand("formatBlock", false, "h3");
        } else if (e.target.id === `${domId}doHeadingH4`) {
          doc.body.focus();
          doc.execCommand("formatBlock", false, "h4");
        } else if (e.target.id === `${domId}doHeadingH0`) {
          doc.body.focus();
          doc.execCommand("formatBlock", false, "p");
        }

        let self = document.getElementById(`${domId}clickRemove`);
        if (self) {
          self.parentElement.removeChild(self);
        }
      }
    };
  },
  fontName: (e, domId) => {
    let mySelf = document.getElementById(`${domId}clickRemove`);
    if (mySelf) {
      mySelf.parentElement.removeChild(mySelf);
    }

    e.target.style.position = "relative";
    let div = `<article   id="${domId}clickRemove"
              style="width:150px;height:100px;overflow:auto;padding:4px;background:#fff;position:absolute;bottom:-4px;left:-4px;z-index:99999;font-size:12px;border:1px solid #a0a0a0;box-shadow:1px 1px 3px #a0a0a0;">
              
              <div id="${domId}fontNameSimSun" style="font-family:SimSun;">宋体</div>
              <div id="${domId}fontNameNSimSun" style="font-family:NSimSun;">新宋体</div>
              <div id="${domId}fontNameSimHei" style="font-family:SimHei;">黑体</div>
              <div id="${domId}fontNameMicrosoft__YaHei" style="font-family:Microsoft YaHei;">微软雅黑</div>
              <div id="${domId}fontNameMicrosoft__JhengHei" style="font-family:Microsoft JhengHei;">微软正黑体</div>
              <div id="${domId}fontNamePMingLiU" style="font-family:PMingLiU;">新细明体</div>
              <div id="${domId}fontNameMingLiU" style="font-family:MingLiU;">细明体</div>
              <div id="${domId}fontNameDFKai-SB" style="font-family:DFKai-SB;">标楷体</div>
              <div id="${domId}fontNameFangSong" style="font-family:FangSong;">仿宋</div>

              <div id="${domId}fontNameKaiTi" style="font-family:KaiTi;">楷体</div>
              <div id="${domId}fontNameLiSu" style="font-family:LiSu;">隶书</div>
              <div id="${domId}fontNameYouYuan" style="font-family:YouYuan;">幼圆</div>
              <div id="${domId}fontNameFZShuTi" style="font-family:FZShuTi;">方正舒体</div>
              <div id="${domId}fontNameFZYaoti" style="font-family:FZYaoti;">方正姚体</div>
              <div id="${domId}fontNameSTCaiyun" style="font-family:STCaiyun;">华文彩云</div>
              <div id="${domId}fontNameSTHupo" style="font-family:STHupo;">华文琥珀</div>
              <div id="${domId}fontNameSTXinwei" style="font-family:STXinwei;">华文新魏</div>
              <div id="${domId}fontNameSTXingkai" style="font-family:STXingkai;">华文行楷</div>
              
              <div id="${domId}fontNameArial" style="font-family:Arial;">Arial</div>
              <div id="${domId}fontNameBrush__Script__MT" style="font-family:Brush Script MT;">Brush Script MT</div>
              <div id="${domId}fontNameCourier__New" style="font-family:Courier New;">Courier New</div>
              <div id="${domId}fontNameLucida__Handwriting" style="font-family:Lucida Handwriting;">Lucida Handwriting</div>
              <div id="${domId}fontNamePapyrus" style="font-family:Papyrus;">Papyrus</div>
              <div id="${domId}fontNameTimes__New__Roman" style="font-family:Times New Roman;">Times New Roman</div>
   
            </article>`;
    e.target.innerHTML = div;

    let doc = document.getElementById(domId + "-iframe").contentDocument;
    doc.onclick = (e) => {
      let self = document.getElementById(`${domId}clickRemove`);
      if (self) {
        self.parentElement.removeChild(self);
      }
    };
    document.body.onclick = (e) => {
      e.stopPropagation();
      if (e.target.dataset.type !== "fontName") {
        let id = e.target.id;
        let index = id.indexOf(`${domId}fontName`);
        if (index === 0) {
          let newId = id.replace(`${domId}fontName`, "");
          let filed = newId.replace("__", "");
          doc.body.focus();
          doc.execCommand("fontName", false, filed);
        }

        let self = document.getElementById(`${domId}clickRemove`);
        if (self) {
          self.parentElement.removeChild(self);
        }
      }
    };
  },
  fontSize: (e, domId) => {
    let mySelf = document.getElementById(`${domId}clickRemove`);
    if (mySelf) {
      mySelf.parentElement.removeChild(mySelf);
    }

    e.target.style.position = "relative";
    let div = `<article   id="${domId}clickRemove"
              style="width:150px;height:98px;overflow:auto;padding:4px;background:#fff;position:absolute;bottom:0;left:0;z-index:99999;font-size:12px;border:1px solid #a0a0a0;box-shadow:1px 1px 3px #a0a0a0;">
              <div id="${domId}fontSize12" style="font-size:12px;">12px</div>
              <div id="${domId}fontSize14" style="font-size:14px;">14px</div>
              <div id="${domId}fontSize16" style="font-size:16px;">16px</div>
              <div id="${domId}fontSize18" style="font-size:18px;">18px</div>
              <div id="${domId}fontSize20" style="font-size:20px;">20px</div>
              <div id="${domId}fontSize24" style="font-size:24px;">24px</div>
              <div id="${domId}fontSize28" style="font-size:28px;">28px</div>
              <div id="${domId}fontSize32" style="font-size:32px;">32px</div>
              <div id="${domId}fontSize42" style="font-size:34px;">42px</div>
              <div id="${domId}fontSize60" style="font-size:36px;">60px</div>
              <div id="${domId}fontSize72" style="font-size:40px;">72px</div>
            </article>`;
    e.target.innerHTML = div;

    let doc = document.getElementById(domId + "-iframe").contentDocument;
    let win = document.getElementById(domId + "-iframe").contentWindow;
    doc.onclick = (e) => {
      let self = document.getElementById(`${domId}clickRemove`);
      if (self) {
        self.parentElement.removeChild(self);
      }
    };
    document.body.onclick = (e) => {
      e.stopPropagation();
      if (e.target.dataset.type !== "fontSize") {
        let id = e.target.id;
        let index = id.indexOf(`${domId}fontSize`);
        if (index === 0) {
          let newId = id.replace(`${domId}fontSize`, "");
          doc.body.focus();
          doc.execCommand("fontSize", false, 3);
          let spanList = doc.getElementsByTagName("span");
          let aList = doc.getElementsByTagName("a");
          //let uList = doc.getElementsByTagName("u");
          // let strikeList = doc.getElementsByTagName("strike");
          let list = [...spanList, ...aList];
          for (let i = 0; i < list.length; i++) {
            let size = list[i].style.fontSize;
            if (size === "medium") {
              list[i].style.fontSize = newId + "px";
              list[i].style.zIndex = "891314";
              list[i].id = Date.now();
            }
          }
        }

        let self = document.getElementById(`${domId}clickRemove`);
        if (self) {
          self.parentElement.removeChild(self);
        }
      }
    };
  },
  foreColor: (e, domId) => {
    let mySelf = document.getElementById(`${domId}clickRemove`);
    if (mySelf) {
      mySelf.parentElement.removeChild(mySelf);
    }

    e.target.style.position = "relative";
    let div = `<article   id="${domId}clickRemove"
              style="width:170px;height:100px;overflow:auto;padding:4px;background:#fff;
              display:flex;flex-wrap:wrap;
              position:absolute;bottom:-4px;left:-4px;z-index:99999;font-size:12px;border:1px solid #a0a0a0;box-shadow:1px 1px 3px #a0a0a0;">
              <div id="${domId}foreColor333333" style="width:170px;height:20px;line-height:color:#333333;20px;text-align:center;">恢复默认</div>
              

              <div id="${domId}foreColorE53333" style="width:20px;height:20px;background:#E53333;margin:0 8px 8px 0;"></div>
              <div id="${domId}foreColorE56600" style="width:20px;height:20px;background:#E56600;margin:0 8px 8px 0;"></div>
              <div id="${domId}foreColorFF9900" style="width:20px;height:20px;background:#FF9900;margin:0 8px 8px 0;"></div>
              <div id="${domId}foreColor64451D" style="width:20px;height:20px;background:#64451D;margin:0 8px 8px 0;"></div>
              <div id="${domId}foreColorDFC5A4" style="width:20px;height:20px;background:#DFC5A4;margin:0 8px 8px 0;"></div>  
              <div id="${domId}foreColorFFE500" style="width:20px;height:20px;background:#FFE500;margin:0 8px 8px 0;"></div>
              
              <div id="${domId}foreColor009900" style="width:20px;height:20px;background:#009900;margin:0 8px 8px 0;"></div>
              <div id="${domId}foreColor006600" style="width:20px;height:20px;background:#006600;margin:0 8px 8px 0;"></div>
              <div id="${domId}foreColor99BB00" style="width:20px;height:20px;background:#99BB00;margin:0 8px 8px 0;"></div>
              <div id="${domId}foreColorB8D100" style="width:20px;height:20px;background:#B8D100;margin:0 8px 8px 0;"></div>
              <div id="${domId}foreColor60D978" style="width:20px;height:20px;background:#60D978;margin:0 8px 8px 0;"></div>
              <div id="${domId}foreColor00D5FF" style="width:20px;height:20px;background:#00D5FF;margin:0 8px 8px 0;"></div>
              
            
              <div id="${domId}foreColor337FE5" style="width:20px;height:20px;background:#337FE5;margin:0 8px 8px 0;"></div>
              <div id="${domId}foreColor003399" style="width:20px;height:20px;background:#003399;margin:0 8px 8px 0;"></div>
              <div id="${domId}foreColor4C33E5" style="width:20px;height:20px;background:#4C33E5;margin:0 8px 8px 0;"></div>
              <div id="${domId}foreColor9933E5" style="width:20px;height:20px;background:#9933E5;margin:0 8px 8px 0;"></div>
              <div id="${domId}foreColorCC33E5" style="width:20px;height:20px;background:#CC33E5;margin:0 8px 8px 0;"></div>
              <div id="${domId}foreColorEE33EE" style="width:20px;height:20px;background:#EE33EE;margin:0 8px 8px 0;"></div>
              
              <div id="${domId}foreColorFFFFFF" style="width:20px;height:20px;background:#FFFFFF;margin:0 8px 8px 0;"></div>
              <div id="${domId}foreColorCCCCCC" style="width:20px;height:20px;background:#CCCCCC;margin:0 8px 8px 0;"></div>
              <div id="${domId}foreColor999999" style="width:20px;height:20px;background:#999999;margin:0 8px 8px 0;"></div>
              <div id="${domId}foreColor666666" style="width:20px;height:20px;background:#666666;margin:0 8px 8px 0;"></div>
              <div id="${domId}foreColor333333" style="width:20px;height:20px;background:#333333;margin:0 8px 8px 0;"></div>
              <div id="${domId}foreColor000000" style="width:20px;height:20px;background:#000000;margin:0 8px 8px 0;"></div>
              
            </article>`;
    e.target.innerHTML = div;

    let doc = document.getElementById(domId + "-iframe").contentDocument;
    let win = document.getElementById(domId + "-iframe").contentWindow;
    doc.onclick = (e) => {
      let self = document.getElementById(`${domId}clickRemove`);
      if (self) {
        self.parentElement.removeChild(self);
      }
    };
    document.body.onclick = (e) => {
      e.stopPropagation();
      if (e.target.dataset.type !== "foreColor") {
        let id = e.target.id;
        let index = id.indexOf(`${domId}foreColor`);
        if (index === 0) {
          let newId = id.replace(`${domId}foreColor`, "");
          let filed = newId.replace("__", "");
          doc.body.focus();
          doc.execCommand("foreColor", false, "#" + filed);
        }

        let self = document.getElementById(`${domId}clickRemove`);
        if (self) {
          self.parentElement.removeChild(self);
        }
      }
    };
  },
  hiliteColor: (e, domId) => {
    let mySelf = document.getElementById(`${domId}clickRemove`);
    if (mySelf) {
      mySelf.parentElement.removeChild(mySelf);
    }

    e.target.style.position = "relative";
    let div = `<article   id="${domId}clickRemove"
              style="width:170px;height:100px;overflow:auto;padding:4px;background:#fff;
              display:flex;flex-wrap:wrap;
              position:absolute;bottom:-4px;left:-4px;z-index:99999;font-size:12px;border:1px solid #a0a0a0;box-shadow:1px 1px 3px #a0a0a0;">
              <div id="${domId}hiliteColortransparent" style="width:170px;height:20px;line-height:20px;text-align:center;">无颜色</div>
              

              <div id="${domId}hiliteColorE53333" style="width:20px;height:20px;background:#E53333;margin:0 8px 8px 0;"></div>
              <div id="${domId}hiliteColorE56600" style="width:20px;height:20px;background:#E56600;margin:0 8px 8px 0;"></div>
              <div id="${domId}hiliteColorFF9900" style="width:20px;height:20px;background:#FF9900;margin:0 8px 8px 0;"></div>
              <div id="${domId}hiliteColor64451D" style="width:20px;height:20px;background:#64451D;margin:0 8px 8px 0;"></div>
              <div id="${domId}hiliteColorDFC5A4" style="width:20px;height:20px;background:#DFC5A4;margin:0 8px 8px 0;"></div>  
              <div id="${domId}hiliteColorFFE500" style="width:20px;height:20px;background:#FFE500;margin:0 8px 8px 0;"></div>
              
              <div id="${domId}hiliteColor009900" style="width:20px;height:20px;background:#009900;margin:0 8px 8px 0;"></div>
              <div id="${domId}hiliteColor006600" style="width:20px;height:20px;background:#006600;margin:0 8px 8px 0;"></div>
              <div id="${domId}hiliteColor99BB00" style="width:20px;height:20px;background:#99BB00;margin:0 8px 8px 0;"></div>
              <div id="${domId}hiliteColorB8D100" style="width:20px;height:20px;background:#B8D100;margin:0 8px 8px 0;"></div>
              <div id="${domId}hiliteColor60D978" style="width:20px;height:20px;background:#60D978;margin:0 8px 8px 0;"></div>
              <div id="${domId}hiliteColor00D5FF" style="width:20px;height:20px;background:#00D5FF;margin:0 8px 8px 0;"></div>
              
            
              <div id="${domId}hiliteColor337FE5" style="width:20px;height:20px;background:#337FE5;margin:0 8px 8px 0;"></div>
              <div id="${domId}hiliteColor003399" style="width:20px;height:20px;background:#003399;margin:0 8px 8px 0;"></div>
              <div id="${domId}hiliteColor4C33E5" style="width:20px;height:20px;background:#4C33E5;margin:0 8px 8px 0;"></div>
              <div id="${domId}hiliteColor9933E5" style="width:20px;height:20px;background:#9933E5;margin:0 8px 8px 0;"></div>
              <div id="${domId}hiliteColorCC33E5" style="width:20px;height:20px;background:#CC33E5;margin:0 8px 8px 0;"></div>
              <div id="${domId}hiliteColorEE33EE" style="width:20px;height:20px;background:#EE33EE;margin:0 8px 8px 0;"></div>
              
              <div id="${domId}hiliteColorFFFFFF" style="width:20px;height:20px;background:#FFFFFF;margin:0 8px 8px 0;"></div>
              <div id="${domId}hiliteColorCCCCCC" style="width:20px;height:20px;background:#CCCCCC;margin:0 8px 8px 0;"></div>
              <div id="${domId}hiliteColor999999" style="width:20px;height:20px;background:#999999;margin:0 8px 8px 0;"></div>
              <div id="${domId}hiliteColor666666" style="width:20px;height:20px;background:#666666;margin:0 8px 8px 0;"></div>
              <div id="${domId}hiliteColor333333" style="width:20px;height:20px;background:#333333;margin:0 8px 8px 0;"></div>
              <div id="${domId}hiliteColor000000" style="width:20px;height:20px;background:#000000;margin:0 8px 8px 0;"></div>
              
            </article>`;
    e.target.innerHTML = div;

    let doc = document.getElementById(domId + "-iframe").contentDocument;
    //let win = document.getElementById(domId + "-iframe").contentWindow;
    doc.onclick = (e) => {
      let self = document.getElementById(`${domId}clickRemove`);
      if (self) {
        self.parentElement.removeChild(self);
      }
    };
    document.body.onclick = (e) => {
      e.stopPropagation();
      if (e.target.dataset.type !== "hiliteColor") {
        let id = e.target.id;
        let index = id.indexOf(`${domId}hiliteColor`);
        if (index === 0) {
          let newId = id.replace(`${domId}hiliteColor`, "");
          let filed = newId.replace("__", "");
          doc.body.focus();

          if (filed == "transparent") {
            doc.execCommand("hiliteColor", false, "transparent");
          } else {
            doc.execCommand("hiliteColor", false, "#" + filed);
          }
        }

        let self = document.getElementById(`${domId}clickRemove`);
        if (self) {
          self.parentElement.removeChild(self);
        }
      }
    };
  },
  doBold: (e, domId) => {
    let doc = document.getElementById(domId + "-iframe").contentDocument;
    doc.body.focus();
    doc.execCommand("bold");
  },
  doItalic: (e, domId) => {
    let doc = document.getElementById(domId + "-iframe").contentDocument;
    doc.body.focus();
    doc.execCommand("italic");
  },
  doUnderline: (e, domId) => {
    let doc = document.getElementById(domId + "-iframe").contentDocument;
    doc.body.focus();
    // doc.execCommand("styleWithCSS", null, false);
    doc.execCommand("underline");
    // doc.execCommand("styleWithCSS", null, true);
    return;
    //为了doLineHeight，"891314"
    let aList = doc.getElementsByTagName("a");
    let spanList = doc.getElementsByTagName("span");
    let list = [...aList, ...spanList];
    for (let i = 0; i < list.length; i++) {
      let textDecorationLine = list[i].style.textDecorationLine;
      let zIndex = list[i].style.zIndex;
      if (textDecorationLine.indexOf("underline") > -1) {
        list[i].style.zIndex = "891314";
      } else if (zIndex === "891314") {
        //删除的下划线
        list[i].style.zIndex = "";
      }
    }
  },
  strikeThrough: (e, domId) => {
    let doc = document.getElementById(domId + "-iframe").contentDocument;
    doc.body.focus();
    // doc.execCommand("styleWithCSS", null, false);
    doc.execCommand("strikeThrough"); //del标签最好
    // doc.execCommand("styleWithCSS", null, true);

    return;
    for (let i = 0; i < list.length; i++) {
      let textDecorationLine = list[i].style.textDecorationLine;
      console.log("textDecorationLine", textDecorationLine);
      let delList = list[i].getElementsByTagName("del");
      let delText = "";
      let text = list[i].innerText;
      console.log(delList, text, delText);
      for (let j = 0; j < delList.length; j++) {
        delText += delList[j].innerText;
      }
      let html = list[i].innerHTML;
      if (textDecorationLine.indexOf("line-through") > -1) {
        list[i].style.textDecorationLine = "";
        html = html.replace(/<del>/g, "");
        html = html.replace(/<\/del>/g, "");
        if (text !== delText) {
          html = "<del>" + html + "</del>";
        }
        list[i].innerHTML = html;
      } else if (text === delText) {
        html = html.replace(/<del>/g, "");
        html = html.replace(/<\/del>/g, "");
        list[i].innerHTML = html;
      }
    }
  },
  createLink: (e, domId) => {
    let doc = document.getElementById(domId + "-iframe").contentDocument;
    let win = document.getElementById(domId + "-iframe").contentWindow;
    let html = null,
      initUrl = "",
      initType = "_blank";
    if (win.getSelection) {
      //一般浏览器
      let dom = win.getSelection().getRangeAt(0).cloneContents();

      let div1 = document.createElement("div");
      document.body.appendChild(div1);
      div1.appendChild(dom);

      let aaaPar = win.getSelection().anchorNode.parentElement;
      while (
        aaaPar.tagName !== "A" &&
        aaaPar.tagName !== "BODY" &&
        aaaPar.tagName !== "HTML"
      ) {
        aaaPar = aaaPar.parentElement;
      }
      let href = aaaPar.href;
      let type = aaaPar.target;
      if (href !== undefined) {
        initUrl = href;
      }

      if (type === "_self") {
        initType = "_self";
      }

      html = div1.innerHTML;

      document.body.removeChild(div1);
    } else if (doc.selection) {
      //IE浏览器、Opera
      html = doc.selection.createRange().htmlText;
    }
    if (html === undefined || html === "") {
      return;
    }

    let ele = `<article style="width:300px;margin:25% auto 0;padding:16px;background:#fff;border:1px solid #a0a0a0;border-radius:10px;">
                  <section>
                    <label for="${domId}linkUrl">URL</label>
                   <input type="text"  id="${domId}linkUrl" style="width:250px;" value="${initUrl}" />
                   <div style="color:#666666;font-size:12px;">输入url;若设置指向锚点，请输入：#锚点名称</div>
                   </section>
                   <section style="width:150px;margin:10px 0 0;">
                    <label for="${domId}linkType">打开类型</label>
                    <select id="${domId}linkType" >
                        <option value="_blank" >新窗口</option>
                        <option value="_self" >当前窗口</option>
                    </select>
                   </section>
                   <section style="width:150px;display:flex;margin:10px auto 0;justify-content:space-around;">
                      <div id="${domId}linkUrlConfirm" style="width:50px;height:26px;line-height:26px;text-align:center;border:1px solid #a0a0a0;border-radius:10px;cursor:pointer;">确定</div>
                      <div id="${domId}linkUrlCancel"  style="width:50px;height:26px;line-height:26px;text-align:center;border:1px solid #a0a0a0;border-radius:10px;cursor:pointer;">取消</div>
                   </section>
                   </article>`;
    let div = document.createElement("div");
    div.id = `${domId}createLink`;
    div.style.cssText =
      "width:100%;height:100%;position:fixed;top:0;left:0;z-index:999999;background:rgba(255,255,255,0.6);";
    document.body.appendChild(div);
    div.innerHTML = ele;
    document.getElementById(`${domId}linkType`).value = initType;

    document.getElementById(`${domId}linkUrlConfirm`).onclick = (e) => {
      let val = document.getElementById(`${domId}linkUrl`).value;
      if (val === "") {
        alert("请输入URL");
        return;
      }
      let type = document.getElementById(`${domId}linkType`).value;

      doc.body.focus();
      doc.execCommand("createLink", false, val);
      document.body.removeChild(div);

      let list = doc.getElementsByTagName("a");
      for (let i = 0; i < list.length; i++) {
        let target = list[i].target;
        if (target === "" && list[i].href !== "") {
          list[i].target = type;
        }
      }
      // let html2 = null;
      // if (win.getSelection) {
      //   //一般浏览器
      //   let dom2 = win.getSelection().getRangeAt(0).cloneContents(); //win.getSelection().anchorNode.parentElement

      //   let div2 = document.createElement("div");
      //   document.body.appendChild(div2);
      //   div2.appendChild(dom2);
      //   html2 = div2.innerHTML;
      //   document.body.removeChild(div2);
      // } else if (doc.selection) {
      //   //IE浏览器、Opera
      //   html2 = doc.selection.createRange().htmlText;
      // }

      // if (html2 === undefined) {
      //   return;
      // }
      // html2 = html2.replace(/<a/g, `<a target="_blank"`);
      // doc.execCommand("delete");
      // doc.execCommand("insertHTML", false, html2);
    };
    document.getElementById(`${domId}linkUrlCancel`).onclick = (e) => {
      document.body.removeChild(div);
    };
  },
  unlink: (e, domId) => {
    let doc = document.getElementById(domId + "-iframe").contentDocument;
    doc.body.focus();
    doc.execCommand("unlink");
  },
  anchorPoint: (e, domId) => {
    let doc = document.getElementById(domId + "-iframe").contentDocument;
    let win = document.getElementById(domId + "-iframe").contentWindow;

    let html = null,
      initUrl = "";
    if (win.getSelection) {
      //一般浏览器
      let dom = win.getSelection().getRangeAt(0).cloneContents();

      let div1 = document.createElement("div");
      document.body.appendChild(div1);
      div1.appendChild(dom);

      let aaaPar = win.getSelection().anchorNode.parentElement;
      while (
        aaaPar.tagName !== "A" &&
        aaaPar.tagName !== "BODY" &&
        aaaPar.tagName !== "HTML"
      ) {
        aaaPar = aaaPar.parentElement;
      }
      let name = aaaPar.name;
      if (name !== undefined) {
        initUrl = name;
      }
      html = div1.innerHTML;
      document.body.removeChild(div1);
    } else if (doc.selection) {
      //IE浏览器、Opera
      html = doc.selection.createRange().htmlText;
    }
    if (html === undefined || html === "") {
      return;
    }

    let ele = `<article style="width:300px;margin:25% auto 0;padding:16px;background:#fff;border:1px solid #a0a0a0;border-radius:10px;">
                <section>
                  <label for="${domId}anchorPointName">锚点名称</label>
                 <input type="text"  id="${domId}anchorPointName" style="width:250px;" value="${initUrl}" />
                 </section>
                 <section style="width:150px;display:flex;margin:10px auto 0;justify-content:space-around;">
                    <div id="${domId}anchorPointConfirm" style="width:50px;height:26px;line-height:26px;text-align:center;border:1px solid #a0a0a0;border-radius:10px;cursor:pointer;">确定</div>
                    <div id="${domId}anchorPointCancel"  style="width:50px;height:26px;line-height:26px;text-align:center;border:1px solid #a0a0a0;border-radius:10px;cursor:pointer;">取消</div>
                 </section>
                 </article>`;
    let div = document.createElement("div");
    div.id = `${domId}anchorPoint`;
    div.style.cssText =
      "width:100%;height:100%;position:fixed;top:0;left:0;z-index:999999;background:rgba(255,255,255,0.6);";
    document.body.appendChild(div);
    div.innerHTML = ele;

    document.getElementById(`${domId}anchorPointConfirm`).onclick = (e) => {
      let val = document.getElementById(`${domId}anchorPointName`).value;
      if (val === "") {
        alert("请输入锚点名称");
        return;
      }
      doc.body.focus();
      doc.execCommand("createLink", false, domId + "javascript:;");
      // let dom = win.getSelection().getRangeAt(0).cloneContents();
      //range.extractContents().textContent获取的是选区中纯文本内容，range.deleteContents()删除选取内容，
      //range.insertNode(span)插入加有行距的内容
      // let dom2 = win.getSelection().anchorNode.parentElement;
      //win.getSelection().toString()
      let list = doc.getElementsByTagName("a");
      for (let i = 0; i < list.length; i++) {
        let href = list[i].href;
        if (href === domId + "javascript:;") {
          list[i].removeAttribute("href");
          list[i].name = val;
          //list[i].style.cssText = "border:1px solid #1989fa;border-radius:4px;";
        }
      }
      document.body.removeChild(div);
    };
    document.getElementById(`${domId}anchorPointCancel`).onclick = (e) => {
      document.body.removeChild(div);
    };
  },
  insertHorizontalRule: (e, domId) => {
    let doc = document.getElementById(domId + "-iframe").contentDocument;
    doc.body.focus();
    doc.execCommand("insertHorizontalRule");
  },
  insertHorizontalRuleDashed: (e, domId) => {
    let doc = document.getElementById(domId + "-iframe").contentDocument;
    doc.body.focus();
    let html = `<hr style="page-break-after:always;height:2px;border:1px dotted #AAA;" />`;
    doc.execCommand("insertHTML", false, html);
  },
  doLineHeight: (e, domId) => {
    let mySelf = document.getElementById(`${domId}clickRemove`);
    if (mySelf) {
      mySelf.parentElement.removeChild(mySelf);
    }
    let doc = document.getElementById(domId + "-iframe").contentDocument;
    let win = document.getElementById(domId + "-iframe").contentWindow;
    // 获取当前的选区
    let html = null;
    if (win.getSelection) {
      //一般浏览器
      let dom = win.getSelection().getRangeAt(0).cloneContents();

      let div1 = document.createElement("div");
      document.body.appendChild(div1);
      div1.appendChild(dom);
      html = div1.innerHTML;
      document.body.removeChild(div1);
    } else if (doc.selection) {
      //IE浏览器、Opera
      html = doc.selection.createRange().htmlText;
    }
    if (html === undefined || html === "") {
      return;
    }

    e.target.style.position = "relative";
    let div = `<article   id="${domId}clickRemove"
              style="width:150px;height:98px;line-height:1.5;overflow:auto;padding:4px;background:#fff;position:absolute;bottom:0;left:0;z-index:99999;font-size:12px;border:1px solid #a0a0a0;box-shadow:1px 1px 3px #a0a0a0;">
              <div id="${domId}doLineHeight10" >单倍行距</div>
              <div id="${domId}doLineHeight12" >1.2倍行距</div>
              <div id="${domId}doLineHeight15" >1.5倍行距</div>
              <div id="${domId}doLineHeight18" >1.8倍行距</div>
              <div id="${domId}doLineHeight20" >2倍行距</div>
            </article>`;
    e.target.innerHTML = div;

    doc.onclick = (e) => {
      let self = document.getElementById(`${domId}clickRemove`);
      if (self) {
        self.parentElement.removeChild(self);
      }
    };
    document.body.onclick = (e) => {
      e.stopPropagation();
      if (e.target.dataset.type !== "doLineHeight") {
        let id = e.target.id;
        let index = id.indexOf(`${domId}doLineHeight`);
        if (index === 0) {
          let newId = id.replace(`${domId}doLineHeight`, "");
          let value = newId / 10;
          doc.body.focus();
          let spanList0 = doc.getElementsByTagName("span");
          let aList0 = doc.getElementsByTagName("a");
          let list0 = [...spanList0, ...aList0].filter((item) => {
            return item.style.zIndex === "891314";
          });
          let objId = {};
          for (let i = 0; i < list0.length; i++) {
            let id = list0[i].id;
            objId[id] = list0[i].style.fontSize;
          }
          doc.execCommand("fontSize", false, 3);

          let spanList = doc.getElementsByTagName("span");
          let aList = doc.getElementsByTagName("a");
          let list = [...spanList, ...aList];
          for (let i = 0; i < list.length; i++) {
            let size = list[i].style.fontSize;
            let zIndex = list[i].style.zIndex;
            if (size === "medium") {
              list[i].style.fontSize = "";
              list[i].style.lineHeight = value;
            }
            if (zIndex === "891314") {
              let id = list[i].id;
              list[i].style.fontSize = objId[id];
            }
          }
        }

        let self = document.getElementById(`${domId}clickRemove`);
        if (self) {
          self.parentElement.removeChild(self);
        }
      }
    };

    return;
    // let range = selection.getRangeAt(0);
    // // 选中区域的html
    // let outSpan = document.createElement("span");
    // outSpan.style.cssText = "line-height: " + value + ";display: inline-block;";
    // outSpan.appendChild(range.cloneContents());

    // // 设置指定行距
    // function setLineHeight(content, value) {
    //   let reg = /line-height\s*:\s*(\d+(\.*\d+)?)/gi;
    //   let c = content.replace(reg, "line-height: " + value);
    //   return c;
    // }

    // let content = setLineHeight(outSpan.innerHTML, value);
    // // 选取中的纯文本
    // let txt = range.extractContents().textContent;
    // let length = txt.length;
    // if (length === 0) {
    //   return;
    // }
    // // 删除被选择的内容
    // range.deleteContents();
    // // 创建新的元素
    // let span = document.createElement("span");
    // span.style.cssText = "line-height: " + value + ";display: inline-block;";
    // // 设置 span 内容
    // span.innerHTML = content;
    // // 在被选择的位置设置行距的元素
    // range.insertNode(span);
  },
  doTable: (e, domId) => {
    let doc = document.getElementById(domId + "-iframe").contentDocument;
    //let win = document.getElementById(domId + "-iframe").contentWindow;

    let ele = `<article style="width:480px;margin:25% auto 0;padding:16px;background:#fff;border:1px solid #a0a0a0;border-radius:10px;">
                  <section>
                    <label>单元格数&emsp;</label>
                    <label for="${domId}doTableRow">行数</label>
                   <input type="text"  id="${domId}doTableRow" style="width:80px;" value="3" />
                   <label for="${domId}doTableCol">列数</label>
                   <input type="text"  id="${domId}doTableCol" style="width:80px;" value="2" />
                   
                   </section>

                   <section style="margin:10px 0 0;">
                    <label>大小&emsp;&emsp;&emsp;</label>
                    <label for="${domId}doTableWidth">宽度</label>
                    <input type="text"  id="${domId}doTableWidth" style="width:80px;" value="100" />
                    <select id="${domId}doTableWidthType" >
                        <option value="%" >%</option>
                        <option value="px" >px</option>
                    </select>
                   
                    <label for="${domId}doTableHeight">高度</label>
                    <input type="text"  id="${domId}doTableHeight" style="width:80px;" value="" />
                    <select id="${domId}doTableHeightType" >
                        <option value="%" >%</option>
                        <option value="px" >px</option>
                    </select>                    
                   </section>

                  <section style="margin:10px 0 0;">
                      <label>边距间距&emsp;</label>
                      <label for="${domId}doTablePadding">边距</label>
                    <input type="text"  id="${domId}doTablePadding" style="width:80px;" value="2" />
                    <label for="${domId}doTableSpacing">间距</label>
                    <input type="text"  id="${domId}doTableSpacing" style="width:80px;" value="0" />
                    
                   </section>

                   <section style="margin:10px 0 0;">
                    <label>对齐方式&emsp;</label>
                    <label for="${domId}doTableAlignType">边距</label>
                    <select id="${domId}doTableAlignType" >
                        <option value="" >默认</option>
                        <option value="left" >左对齐</option>
                        <option value="center" >居中</option>
                        <option value="right" >右对齐</option>
                    </select>  

                    <section style="margin:10px 0 0;" id="${domId}doTableBorder">
                      <label>表格边框&emsp;</label>
                      <label for="${domId}doTableBorderWidth">边框</label>
                    <input type="text"  id="${domId}doTableBorderWidth" style="width:80px;" value="1" />
                    <label >颜色</label>
                    <input type="radio" name="borderRadio"  value="0"  />无颜色
                    <input type="radio" name="borderRadio"  value="1" checked="true" />有颜色
                    <input type="color"  id="${domId}doTableBorderColor" style="width:80px;" value="#000000" />
                    </section>

                    <section style="margin:10px 0 0;" id="${domId}doTableBackground">
                    <label >背景颜色&emsp;</label>
                    <input type="radio" name="backRadio"  value="0" checked="true" />无颜色
                    <input type="radio" name="backRadio"  value="1" />有颜色
                    <input type="color"  id="${domId}doTableBackgroundColor" style="width:80px;" value="#ffffff" />
                    </section>

                   <section style="width:150px;display:flex;margin:10px auto 0;justify-content:space-around;">
                      <div id="${domId}doTableConfirm" style="width:50px;height:26px;line-height:26px;text-align:center;border:1px solid #a0a0a0;border-radius:10px;cursor:pointer;">确定</div>
                      <div id="${domId}doTableCancel"  style="width:50px;height:26px;line-height:26px;text-align:center;border:1px solid #a0a0a0;border-radius:10px;cursor:pointer;">取消</div>
                   </section>
                   </article>`;
    let div = document.createElement("div");
    div.id = `${domId}doTable`;
    div.style.cssText =
      "width:100%;height:100%;position:fixed;top:0;left:0;z-index:999999;background:rgba(255,255,255,0.6);";
    document.body.appendChild(div);
    div.innerHTML = ele;
    document.getElementById(`${domId}doTableWidthType`).value = "%";
    document.getElementById(`${domId}doTableHeightType`).value = "%";
    document.getElementById(`${domId}doTableAlignType`).value = "";

    document.getElementById(`${domId}doTableConfirm`).onclick = (e) => {
      let rowNum = document.getElementById(`${domId}doTableRow`).value;
      let colNum = document.getElementById(`${domId}doTableCol`).value;
      let tWidth = document.getElementById(`${domId}doTableWidth`).value;
      let tWidthType = document.getElementById(
        `${domId}doTableWidthType`
      ).value;
      let tHeight = document.getElementById(`${domId}doTableHeight`).value;
      let tHeightType = document.getElementById(
        `${domId}doTableHeightType`
      ).value;
      let paddNum = document.getElementById(`${domId}doTablePadding`).value;
      let spacNum = document.getElementById(`${domId}doTableSpacing`).value;
      let alignType = document.getElementById(`${domId}doTableAlignType`).value;
      let borderNum = document.getElementById(
        `${domId}doTableBorderWidth`
      ).value;
      let borderColor = "";
      let checkVal1 = document
        .getElementById(`${domId}doTableBorder`)
        .querySelectorAll("input[name='borderRadio']:checked")[0].value;
      if (checkVal1 === "1") {
        borderColor = document.getElementById(
          `${domId}doTableBorderColor`
        ).value;
      }

      let backgroundColor = "";
      let checkVal2 = document
        .getElementById(`${domId}doTableBackground`)
        .querySelectorAll("input[name='backRadio']:checked")[0].value;
      if (checkVal2 === "1") {
        backgroundColor = document.getElementById(
          `${domId}doTableBackgroundColor`
        ).value;
      }
      if (!/^[1-9][0-9]{0,}$/.test(rowNum)) {
        alert("行数请输入大于0的整数");
        return;
      } else if (!/^[1-9][0-9]{0,}$/.test(colNum)) {
        alert("列数请输入大于0的整数");
        return;
      } else if (!/^[0-9]{0,}$/.test(tWidth) && tWidth !== "") {
        alert("宽度请输入数字");
        return;
      } else if (!/^[0-9]{0,}$/.test(tHeight) && tHeight !== "") {
        alert("高度请输入数字");
        return;
      } else if (!/^[0-9]{0,}$/.test(paddNum) && paddNum !== "") {
        alert("边距请输入数字");
        return;
      } else if (!/^[0-9]{0,}$/.test(spacNum) && spacNum !== "") {
        alert("间距请输入数字");
        return;
      } else if (!/^[0-9]{0,}$/.test(borderNum) && borderNum !== "") {
        alert("边框请输入数字");
        return;
      }
      let html = `<table style="${
        tWidth !== "" ? "width:" + tWidth + tWidthType + ";" : ""
      }${tHeight !== "" ? "height:" + tHeight + tHeightType + ";" : ""}${
        backgroundColor !== ""
          ? "background-color:" + backgroundColor + ";"
          : ""
      }"
      
      ${alignType !== "" ? 'align="' + alignType + '"' : ""}
     ${paddNum !== "" ? 'cellpadding="' + paddNum + '"' : ""}
     ${spacNum !== "" ? 'cellspacing="' + spacNum + '"' : ""}
     ${borderNum !== "" ? 'border="' + borderNum + '"' : ""}
     ${borderColor !== "" ? 'bordercolor="' + borderColor + '"' : ""}
     >`;
      html += "<tbody>";
      for (let i = 0; i < rowNum; i++) {
        html += "<tr>";
        for (let col = 0; col < colNum; col++) {
          html += "<td><br/></td>";
        }
        html += "</tr>";
      }
      html += "</tbody>";
      html += "</table>";
      html += "<br/>";

      doc.body.focus();
      doc.execCommand("insertHTML", false, html);
      document.body.removeChild(div);
    };
    document.getElementById(`${domId}doTableCancel`).onclick = (e) => {
      document.body.removeChild(div);
    };
  },
  insertImage: (e, domId) => {
    let doc = document.getElementById(domId + "-iframe").contentDocument;
    //let win = document.getElementById(domId + "-iframe").contentWindow;
    //accept="image/gif, image/jpeg"
    let ele = `<article style="width:300px;margin:25% auto 0;padding:16px;background:#fff;border:1px solid #a0a0a0;border-radius:10px;">
                <section>
                  <label for="${domId}insertImageFile">选择图片</label>
                 <input type="file" accept="image/*" placeholder="请上传图片" id="${domId}insertImageFile" style="width:250px;"  />
                 </section>
                 <section style="width:150px;display:flex;margin:10px auto 0;justify-content:space-around;">
                    <div id="${domId}insertImageConfirm" style="width:50px;height:26px;line-height:26px;text-align:center;border:1px solid #a0a0a0;border-radius:10px;cursor:pointer;">确定</div>
                    <div id="${domId}insertImageCancel"  style="width:50px;height:26px;line-height:26px;text-align:center;border:1px solid #a0a0a0;border-radius:10px;cursor:pointer;">取消</div>
                 </section>
                 </article>`;
    let div = document.createElement("div");
    div.id = `${domId}insertImage`;
    div.style.cssText =
      "width:100%;height:100%;position:fixed;top:0;left:0;z-index:999999;background:rgba(255,255,255,0.6);";
    document.body.appendChild(div);
    div.innerHTML = ele;

    let imgBase64 = "";
    document.getElementById(`${domId}insertImageFile`).onchange = (el) => {
      if (el.currentTarget.files.length === 0) {
        return;
      }
      let reader = new FileReader();
      reader.onload = (e) => {
        imgBase64 = reader.result;
      };
      reader.readAsDataURL(el.target.files[0]);
      //获取图片大小，字节
      let fileMsg = el.currentTarget.files[0];
      let fileType = fileMsg.type;
      if (fileType.indexOf("image/") !== 0) {
        alert("请上传图片!");
        document.getElementById(`${domId}insertImageFile`).value = ""; //文件
      }
      // let fileSize = fileMsg.size;//不能超过2668484,大约为2.6MB
      // if (fileSize > 2668484) {
      //     alert("选择的图像文件不能超过2.6MB,请重新选择!");
      //     document.getElementById(`${domId}insertImageFile`).value=""; //文件
      // }
    };
    document.getElementById(`${domId}insertImageConfirm`).onclick = (e) => {
      let val = document.getElementById(`${domId}insertImageFile`).value;
      if (val === "") {
        alert("请上传图片");
        return;
      }
      doc.body.focus();
      doc.execCommand("insertImage", false, imgBase64);
      document.body.removeChild(div);
      let imgList = doc.getElementsByTagName("img");
      for (let i = 0; i < imgList.length; i++) {
        imgList[i].style.objectFit = "contain";
        imgList[i].style.maxWidth = "100%";
      }
    };
    document.getElementById(`${domId}insertImageCancel`).onclick = (e) => {
      document.body.removeChild(div);
    };
  },
  setType: (e, domId) => {
    let doc = document.getElementById(domId + "-iframe").contentDocument;
    doc.body.focus();
    //doc.execCommand("enableInlineTableEditing");
  },
};
export default headerClickFun;