vargetOpenUrlValue=function (editor:any) {//获取选中节点的值作为初始值returneditor.dom.getParent(editor.selection.getNode(), '[data-tp-open-url]')?.innerText}
//@ts-ignorewindow.openUrlData=getOpenUrlValue(editor)||''// 利用window挂上全局 openUrlData 在iframe的子页面 使用window.parent.openUrlData 调用editor.windowManager.openUrl({
title: 'openUrl',
width: 300,
url: '/openUrl/index.html',//根据自己的实际路径来buttons: [
                {
type: 'cancel',
text: 'Close'                },
                {
type: 'custom',
text: 'Save',
name: 'save',
primary: true                },
            ],
onAction: function (api:any, details:any) {
switch (details.name) {
case'save':
//@ts-ignoreeditor.insertContent('<span style=""  contenteditable="false" >'+window.openUrlData+'</span>')
api.close();
break;
default:
break;
                }
            }
        });
}

//状态选择器适配器 用于更新按钮状态conststateSelectorAdapter=function (editor:any, selector:any) {
returnfunction (buttonApi:any) {
returneditor.selection.selectorChangedWithUnbind(selector.join(','),buttonApi.setActive).unbind;
  };
}
editor.ui.registry.addToggleButton('tp-openurl', {
icon: 'tp-openurl',
tooltip: 'Open Url',
onSetup: stateSelectorAdapter(editor, [
'*[data-tp-open-url]',
    ]),
onAction: () =>Main.create(editor,opt)
  });
varcmd=function (command:string) {
returnfunction () {
returneditor.execCommand(command);
    };
  };
//注册删除OpenUrl按钮editor.ui.registry.addButton('tpOpenUrlDelete', {
tooltip: 'Delete',
onAction: cmd('mceTpOpenUrlDelete'),
icon: 'table-delete-table',
  });
//注册编辑OpenUrl按钮editor.ui.registry.addButton('tpOpenUrlProps ', {
tooltip: 'Edit Open Url',
onAction: cmd('tpOpenUrl'),
icon: 'tp-openurl',
  });
//注册编辑OpenUrl 删除逻辑editor.addCommand('mceTpOpenurlDelete', function () { 
try {
editor.dom.getParent(editor.selection.getNode(), '[data-tp-open-url]').remove() //获得选中节点 删除即可editor.focus();
    } catch (error) {
    } 
  })
//上下文菜单配置 （已注册的按钮）varopenurlToolbar='tpOpenUrlProps \| tptpOpenUrlDelete'if (openurlToolbar.length>0) {
varisOpenurl=function (_openurl:any) {//判断是否是 Openurl 用于触发上下文菜单returneditor.dom.is(_openurl, '[data-tp-open-url]') &&editor.getBody().contains(_openurl);
    };
//注册上下文菜单editor.ui.registry.addContextToolbar('tp-openurl', {
predicate: isOpenurl,
items: openurlToolbar,
scope: 'node',
position: 'node'    });
  }

vargetLogicflowValue=function (editor:any) {
letobjectVal=editor.dom.getParent(editor.selection.getNode(), '[data-tp-logicflow]')
if(objectVal){
try {
//@ts-ignorewindow.tpLogicflow.tp_initData=objectVal.firstChild||''              } catch (error) {
//@ts-ignorewindow.tpLogicflow.tp_initData=''              }
  }else{
//@ts-ignorewindow.tpLogicflow.tp_initData=''  }
 };
getLogicflowValue(editor)
editor.windowManager.openUrl({
title: data.name,
size: 'large',
url: '/logicflow/index.html',
buttons: [
         {
type: 'cancel',
text: 'Close'         },
         {
type: 'custom',
text: 'Save',
name: 'save',
primary: true         },
       ],
onAction: function (api:any, details:any) {
switch (details.name) {
case'save'//@ts-ignorewindow.tpLogicflow.saveGraphSVGData().then(res=>{
editor.insertContent('<span data-tp-logicflow data-tp-logicflow contenteditable="false" data-tp-no-img><object data="'+res.url+'"  style="'+res.style+'"/></span>')
api.close();
break;
default:
break;
         }
       }
     });

constsetupWebComponent= (win:any, doc:Document, editor:any) => {
consttemplate=doc.createElement('template');
conststaticStyle=document.createElement('style'); //固定样式 作于影子节点（根节点）constcustomStyle=document.createElement('style'); //自定义样式staticStyle.textContent=`body{padding: 0;margin: 0;}:host {overflow: hidden;display: block; }` ;
//HTML 模板 与 Vue 类似 这里我们需要实现 一个头部(tp-codegroup_top) 和 主体内容（tp-codegroup_main）两部分  template 如下template.innerHTML=`<div class="tp-codegroup"><div class="tp-codegroup_top" id="headerID"><slot></slot></div><div class="tp-codegroup_main"><slot name="content" ></slot></div></div>`// Create the conditional block custom element.// Familiarize yourself with web components and custom elements here:// https://developer.mozilla.org/en-US/docs/Web/Web_ComponentsclassTpCodegroupextendswin.HTMLElement {// 这里得是扩展的 tinymce 实例中的 Window 因为自定义的节点是插入 tinymce 的实例中。constructor() {
super();
// https://developer.mozilla.org/en-US/docs/Web/API/Element/attachShadowconstshadow=this.attachShadow({mode: 'open'});//closedtemplate.content.prepend(customStyle)
template.content.prepend(staticStyle)
this.shadowRoot.appendChild(template.content.cloneNode(true));
      }
  }
// Register our web component to the tag we want to use it as// https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/definetry{
win.customElements.define('tp-codegroup' , TpCodegroup);//定义了一个自定义元素  }catch{
  }
}

import { initPlugin } from'./core/webCompontent';
exportdefaultfunction(){
tinymce.PluginManager.add('tp-codegroup', function(editor: any, url: any) { //initPlugin(editor,opt)
return {
getMetadata: function () {
return  {
name: 'Codegroup',
url: 'https://github.com/tinymce-plugin',
          };
      }
  };
  });
};

constheaderEditableFn= (self: any) => {
let_len=self.children.length;
// self.shadowRoot.querySelector('#headerID.tp-codegroup_top').setAttribute('style',( self.getAttribute("data-top-style") ? self.getAttribute("data-top-style") : ''));for (leti=_len-2; i>=0; i--) {
// self.tp$state.count ++;self.children[i].setAttribute("contenteditable", false);
self.children[i].setAttribute(
"class",
"tp-partition tp-codegroup_label"+ (i===0?" checked" : "")
    );
self.children[i].setAttribute("data-idx", i);
self.children[i].onkeydown=function () {
if (!this.innerText) {
console.dir(this.firstChild);
this.firstChild.innerText="five";
returnfalse;
      }
    };
self.children[i].firstChild?.setAttribute("class", "tp-component_inline");
self.children[i].firstChild?.setAttribute("data-idx", i);
self.children[i].firstChild?.setAttribute("contenteditable", true);
  }
self.removeChild= () => {
console.log("five");
  };
};
constcontentEditableFn= (self: any) => {
if (self.lastChild&&self.lastChild.className==="tp-codegroup_main") {
constpartitionEditableWrapper=self.lastChild;
//@ts-ignorepartitionEditableWrapper.setAttribute("contenteditable", false);
partitionEditableWrapper.setAttribute(
"class",
"tp-partition tp-codegroup_main"    );
partitionEditableWrapper.setAttribute("slot", "content");
if (self.lastChild.firstChild) {
self.lastChild.firstChild.setAttribute("class", "tp-code_main");
self.lastChild.firstChild.setAttribute(
"style",
"overflow: hidden; padding: 0 3px; max-height: 10000px; transition: all 0s"      );
self.lastChild.firstChild.setAttribute("contenteditable", true);
    }
let_len=self.lastChild.children.length;
for (leti=_len-1; i>0; i--) {
self.lastChild.children[i].setAttribute("class", "tp-code_main");
self.lastChild.children[i].setAttribute(
"style",
"overflow: hidden; padding: 0 3px; max-height: 0; transition: all 0s"      );
    }
  }
};
constconnectedCallback= (shadowRoot: any, dom: any) => {
letisChecked= (ele: any) => {
return (
      (ele.className&&ele.className.indexOf("tp-partition tp-codegroup_label") !==-1) ||      (ele.parentNode&&        ((ele.parentNode.className&&ele.parentNode.className.indexOf(
"tp-partition tp-codegroup_label"          ) !==-1) ||          (ele.parentNode.parentNode&&ele.parentNode.parentNode.className&&ele.parentNode.parentNode.className.indexOf(
"tp-partition tp-codegroup_label"            ) !==-1)))
    );
  };
shadowRoot    .getElementById("headerID")
    .addEventListener("click", function (e: any) {
if (isChecked(e.target)) {
let_idex=e.target.getAttribute("data-idx") ||e.target.parentNode.getAttribute("data-idx") ||"0";
let_tabsToplist=dom.querySelectorAll(
"div.tp-partition.tp-codegroup_label"        );
letoldSelectTopDom=dom.querySelector(
"div.tp-partition.tp-codegroup_label.checked"        );
oldSelectTopDom?oldSelectTopDom.setAttribute(
"class",
"tp-partition tp-codegroup_label"            )
          : "";
letnewSelectTopDom=_tabsToplist[_idex];
newSelectTopDom?newSelectTopDom.setAttribute(
"class",
"tp-partition tp-codegroup_label checked"            )
          : "";
let_tabslist=dom.querySelectorAll("div.tp-code_main");
letoldSelectDom=dom.querySelector(
"div.tp-code_main[contenteditable=true]"        );
oldSelectDom?oldSelectDom.setAttribute("contenteditable", false) ||            (oldSelectDom.style.maxHeight="0px")
          : "";
letnewSelectDom=_tabslist[_idex];
newSelectDom?newSelectDom.setAttribute("contenteditable", true) ||            (newSelectDom.style.maxHeight="10000px")
          : "";
      }
    });
};
constsetupWebComponent= (win: any, doc: Document, editor: any) => {
consttemplate=doc.createElement("template");
conststaticStyle=document.createElement("style"); //固定样式 作于影子节点（根节点）constcustomStyle=document.createElement("style"); //自定义样式staticStyle.textContent=`body{padding: 0;margin: 0;}:host {overflow: hidden;display: block; }.tp-codegroup {background: #1E1E1E;border-radius: 4px;overflow: hidden;}.tp-codegroup ::slotted(.tp-tabs_label) {display: none;}.tp-codegroup .tp-codegroup_top {border: none;padding: 4px 10px;}.tp-codegroup .tp-codegroup_top ::slotted(.tp-codegroup_label) {margin: 0;display: inline-block;vertical-align: bottom;box-sizing: border-box;cursor: default;background-color: #1E1E1E;line-height: 1.4;font-size: 20px;color: rgba(255,255,255,.9);font-weight: bold;border-bottom: 2px solid transparent;padding: 2px 4px;}.tp-codegroup .tp-codegroup_top ::slotted(.tp-codegroup_label.checked) {border-bottom: #43B984 2px solid;}.tp-codegroup  ::slotted(.tp-codegroup_main .tp-code_main){padding: 0 2px;}`;
//HTML 模板 与 Vue 类似 这里我们需要实现 一个头部 和 主体两部分  template 如下template.innerHTML=`<div class="tp-codegroup"><div class="tp-codegroup_top" id="headerID"><slot></slot></div><div class="tp-codegroup_main"><slot name="content" ></slot></div></div>`;
// Create the conditional block custom element.// Familiarize yourself with web components and custom elements here:// https://developer.mozilla.org/en-US/docs/Web/Web_ComponentsclassTpCodegroupextendswin.HTMLElement {
// 这里得是扩展的 tinymce 实例中的 Window 因为自定义的节点是插入 tinymce 的实例中。constructor() {
super();
this.setAttribute("contenteditable", false);
this.setAttribute("data-mce-tp-codegroup", "tp-codegroup");
// https://developer.mozilla.org/en-US/docs/Web/API/Element/attachShadowconstshadow=this.attachShadow({ mode: "open" }); //closedtemplate.content.prepend(customStyle);
template.content.prepend(staticStyle);
this.shadowRoot.appendChild(template.content.cloneNode(true));
    }
connectedCallback() {
//当 custom element首次被插入 DOM 时，被调用 ,这里我们需要对自定义标签进行调整改造，使其可以 点击切换//创建头部headerEditableFn(this);
//创建主体内容contentEditableFn(this);
//创建回调connectedCallback(this.shadowRoot, this);
    }
attributeChangedCallback() {
console.log("five222");
    }
staticgetobservedAttributes() {
return ["data-top-bg", "data-mce-tp-codegroup", "data-value"];
    }
  }
// Register our web component to the tag we want to use it as// https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/definetry {
win.customElements.define("tp-codegroup", TpCodegroup); //定义了一个自定义元素  } catch {}
};
constparserFn= (node: any) => {
//解析组件标签node.attr({
"data-tp-codegroup": null,
"data-mce-tp-codegroup": "tp-codegroup",
"data-top-style": node.firstChild.attr("style"),
  });
while (node.firstChild.name==="input") {
node.firstChild.remove();
  }
let_node=node.firstChild.firstChild;
while (_node&&_node.name==="label") {
let_nextNode=_node.next;
letplaceTop=newtinymce.html.Node("div", 1);
_node.name="p";
_node.wrap(placeTop);
_node=_nextNode;
  }
letcodegroupMainFirst=node.lastChild.firstChild;
while (codegroupMainFirst&&codegroupMainFirst.name==="label") {
letcodegroupMainFirstNext=codegroupMainFirst.next.next;
codegroupMainFirst.remove();
codegroupMainFirst=codegroupMainFirstNext;
  }
node.firstChild.unwrap();
node.type=1;
node.name="tp-codegroup";
};
constserializerFn= (node: any) => {
//序列化组件标签node.attr({
"data-mce-tp-codegroup": null,
"data-tp-codegroup": "tp-codegroup",
contenteditable: null,
class: "tp-codegroup",
  });
letplaceTop=newtinymce.html.Node("div", 1);
placeTop.attr("class", "tp-codegroup_top");
placeTop.attr("style", node.attr("data-top-style"));
node.attr("data-top-style", null);
let_node=node.firstChild;
letcloneNodeList= [];
while (_node.attr("data-idx")) {
let_nextNode=_node.next;
_node.firstChild.name="label";
_node.firstChild.attr({
contenteditable: null,
"data-idx": null,
class: "tp-codegroup_label",
for: node.attr("data-id") +"code"+_node.attr("data-idx"),
    });
cloneNodeList.push(
newtinymce.html.Serializer().serialize(_node.firstChild)
    );
placeTop.append(_node.firstChild);
_node.remove();
_node=_nextNode;
  }
let_lastNode=node.lastChild.firstChild;
let_count=0;
while (_lastNode&&_lastNode.attr("class") ==="tp-codegroup_main") {
let_nextNode=_lastNode.next;
letplaceInput=newtinymce.html.Node("input", 1);
placeInput.shortEnded=true;
placeInput.attr({
id: node.attr("data-id") +"code"+_count,
type: "radio",
name: node.attr("data-id"),
    });
_count==0?placeInput.attr("checked", "") : "";
node.append(placeInput);
_lastNode.attr({
contenteditable: null,
style: null,
class: "tp-codegroup_main tp-code_main_"+_count,
    });
if (cloneNodeList[_count]) {
node.lastChild.insert(
newtinymce.html.DomParser().parse(cloneNodeList[_count]),
_lastNode,
true      );
_count++;
    }
_lastNode=_nextNode;
  }
node.append(placeTop);
node.firstChild.attr({
contenteditable: null,
class: "tp-codegroup_main",
  });
node.append(node.firstChild);
node.type=1;
//   node.attr('data-id', null)node.name="div";
};
varglobal$11=tinymce.util.Tools.resolve("tinymce.util.I18n");
varglobal$6=tinymce.util.Tools.resolve("tinymce.util.XHR");
exportconstinitPlugin= (editor: any, opt: pluginOpt) => {
editor.on("preInit", () => {
global$6.send({
url: "/tpcode.css",
async: false,
success: function (style: string) {
try {
editor.dom.addStyle(style);
        } catch (error) {}
      },
    });
constdoc=editor.getDoc();
constwin=editor.getWin();
setupWebComponent(win, doc, editor);
//解析editor.parser.addAttributeFilter(
"data-tp-codegroup",
      (nodes: { attr: (arg0: string) =>any }[]) => {
nodes&&nodes.forEach((node: { attr: (arg0: string) =>any }) => {
parserFn(node);
          });
      }
    );
//序列化editor.serializer.addAttributeFilter(
"data-mce-tp-codegroup",
      (nodes: any[]) => {
nodes&&nodes.forEach((node) => {
serializerFn(node);
          });
      }
    );
  });
};