三种插件开发模式，带你玩废tinymce开发者社区

三种插件开发模式，带你玩废tinymce

组件名称	描述
addAutocompleter()	注册一个新的自动完成组件。当键入时在内容中匹配配置的字符串模式时，将触发自动完成器。Emoticons 和 Charmap 使用自动完成程序。有关创建自动完成器的信息, 可以查阅: UI Components - Autocompleter.
addButton()	注册一个新的工具栏按钮，该按钮在通过键盘导航控件单击或激活时执行命令。有关创建基本工具栏按钮的信息，可以参阅: UI Components - Types of toolbar buttons: Basic button.
addContextForm()	注册一个新的上下文表单项。与上下文菜单项类似，上下文表单是在匹配内容谓词时出现输入表单元素的项。上下文表单的一个示例是使用配置 { link_context_toolbar: true } 时的链接插件。当光标位于链接上时，会出现一个上下文输入表单，允许快速更改 url 字段。有关创建上下文表单的信息，可以参阅 : UI Components - Context forms.
addContextMenu()	注册一个新的上下文菜单部分，该部分仅在匹配内容谓词时出现，例如，光标位于表内。有关创建上下文菜单的信息，可以参阅: UI Components - Context Menu.
addContextToolbar()	注册一个新的上下文工具栏，该工具栏仅在内容谓词匹配时出现，例如光标位于图像元素上。有关创建上下文工具栏的信息, 可以参阅: UI Components - Context Toolbar.
addGroupToolbarButton()	为工具栏注册一个新的组工具栏按钮。呈现一个工具栏按钮，单击该按钮会打开一个浮动工具栏。注意：组工具栏按钮只能在使用浮动工具栏模式时使用。有关创建组工具栏按钮的信息, 可以参阅: UI Components - Types of toolbar buttons: Group toolbar button.
addIcon()	注册一个新的 SVG 图标，图标名称引用可以由任何组件配置。该图标仅适用于为其配置的编辑器实例
addMenuButton()	注册一个新的菜单按钮。添加单击时打开菜单的工具栏按钮。菜单可以由 addMenuItem、addNestedMenuItem 或 addToggleMenuItem 创建的项目填充。有关创建工具栏菜单按钮的信息, 可以参阅: UI Components - Types of toolbar buttons: Menu button.
addMenuItem()	注册一个新的菜单项，该菜单项在通过键盘导航控件单击或激活时执行命令。有关创建基本菜单项的信息, 可以参阅: UI Components - Custom menu items: Basic menu items.
addNestedMenuItem()	注册一个新菜单项，当单击或被键盘导航控件激活时显示子菜单。子菜单可以由 addMenuItem、addNestedMenuItem 或 addToggleMenuItem 创建的项目填充。有关创建嵌套菜单项的信息, 可以参阅: UI Components - Custom menu items: Nested menu items.
addSidebar()	注册一个新的侧边栏容器。此侧边栏容器附加到编辑器的右侧，可以打开或关闭。注册后，将创建一个具有相同侧边栏名称的新工具栏切换按钮。此外，还有一个 ToggleSidebar 命令和一个“ToggleSidebar”事件，可用于管理侧边栏的打开/关闭状态。tinycomments 插件为其 Ui 组件使用侧边栏。有关创建自定义侧边栏的信息，可以参阅: UI Components - Custom sidebar.
addSplitButton()	为工具栏注册一个新的拆分按钮。高级列表插件使用拆分按钮来简化其功能。有关创建拆分工具栏按钮的信息, 可以参阅: UI Components - Types of toolbar buttons: Split button.
addToggleButton()	为工具栏注册一个新的切换按钮。可以在配置中设置切换按钮状态。有关创建切换工具栏按钮的信息, 可以参阅: UI Components - Types of toolbar buttons: Toggle button.
addToggleMenuItem()	注册一个新的菜单项，其作用类似于切换按钮，在菜单项中显示一个勾号以表示状态。有关创建切换菜单项的信息, 可以参阅: UI Components - Custom menu items: Toggle menu items.

名称	类型	是否必须	描述
title	string	必需	对话框的标题。
url	string	必需	要加载的外部页面的 URL。
width	number	可选的	对话框的宽度（以像素为单位）。
height	number	可选	对话框的高度（以像素为单位）。
buttons	FooterButton[]	可选	要在对话框的页脚中呈现的一组按钮。
onAction	(dialogApi, details) => void	可选	单击自定义类型页脚按钮时调用的函数。
onCancel	(dialogApi) => void	可选	取消对话框时调用的函数。对话框标题的关闭按钮和取消类型的页脚按钮调用此函数。
onClose	() => void	可选	对话框关闭时调用的函数。对话框标题的关闭按钮、取消类型的页脚按钮和对话框实例 API 的close()方法调用此函数。
onMessage	(dialogApi, details) => void	可选	从外部页面接收到消息时调用的函数。

<!DOCTYPE html>
<html lang="en">
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>新窗口</title>
</head>
    <input id="inputID" type="text" value="Hello Five!" placeholder="Hello Five!" oninput="onInputFn()">
  <script>
    let inputID = document.getElementById('inputID')
    //初始化 如果有值 可以替换掉
    window.parent.openUrlData?inputID.value = window.parent.openUrlData: ''//使用window.parent.openUrlData 调用父页面的数据
    window.parent.openUrlData = inputID.value
  // 更新数据
    function onInputFn(){
    window.parent.openUrlData = inputID.value
  </script>
</body>
</html>

var getOpenUrlValue = function (editor:any) {//获取选中节点的值作为初始值
  return editor.dom.getParent(editor.selection.getNode(), '[data-tp-open-url]')?.innerText
  //@ts-ignore
 window.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-ignore
		              editor.insertContent('<span style=""  contenteditable="false" >'+window.openUrlData+'</span>')
		              api.close();
						break;
					default:
						break;
}

//状态选择器适配器 用于更新按钮状态
const stateSelectorAdapter = function (editor:any, selector:any) {
  return function (buttonApi:any) {
    return editor.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)
  var cmd = function (command:string) {
    return function () {
      return editor.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) {
  //上下文菜单配置 （已注册的按钮）
  var openurlToolbar =  'tpOpenUrlProps \| tptpOpenUrlDelete'
  if (openurlToolbar.length > 0) {
    var isOpenurl = function (_openurl:any) {//判断是否是 Openurl 用于触发上下文菜单
        return editor.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'
  }

var getLogicflowValue = function (editor:any) {
  let objectVal = editor.dom.getParent(editor.selection.getNode(), '[data-tp-logicflow]')
  if(objectVal){
    try {
                //@ts-ignore
                window.tpLogicflow.tp_initData = objectVal.firstChild || ''
              } catch (error) {
                //@ts-ignore
                window.tpLogicflow.tp_initData = ''
  }else{
    //@ts-ignore
    window.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-ignore
             window.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;
     });

const setupWebComponent = (win:any, doc:Document, editor:any) => {
  const template = doc.createElement('template');
  const staticStyle = document.createElement('style'); //固定样式 作于影子节点（根节点）
  const customStyle = 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 class="tp-codegroup_main">
        <slot name="content" ></slot>
  </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_Components
  class TpCodegroup extends win.HTMLElement {// 这里得是扩展的 tinymce 实例中的 Window 因为自定义的节点是插入 tinymce 的实例中。
      constructor() {
          super();
           // https://developer.mozilla.org/en-US/docs/Web/API/Element/attachShadow
          const shadow = this.attachShadow({mode: 'open'});//closed
          template.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/define
    win.customElements.define('tp-codegroup' , TpCodegroup);//定义了一个自定义元素
  }catch{
}

<tp-codegroup>
  <span>我是头部1 Five!</span>
  <span>我是头铁1 Five!</span>
  <div slot="content">我是主题部分</div>
</tp-codegrou>

tinymce.init({
custom_elements: 'tp-codegroup',
})

import { initPlugin } from './core/webCompontent';
export default function(){
  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',
};

const headerEditableFn = (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 (let i = _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";
        return false;
    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");
const contentEditableFn = (self: any) => {
  if (self.lastChild && self.lastChild.className === "tp-codegroup_main") {
    const partitionEditableWrapper = self.lastChild;
    //@ts-ignore
    partitionEditableWrapper.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 (let i = _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"
const connectedCallback = (shadowRoot: any, dom: any) => {
  let isChecked = (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") ||
        let _tabsToplist = dom.querySelectorAll(
          "div.tp-partition.tp-codegroup_label"
        let oldSelectTopDom = dom.querySelector(
          "div.tp-partition.tp-codegroup_label.checked"
        oldSelectTopDom
          ? oldSelectTopDom.setAttribute(
              "class",
              "tp-partition tp-codegroup_label"
          : "";
        let newSelectTopDom = _tabsToplist[_idex];
        newSelectTopDom
          ? newSelectTopDom.setAttribute(
              "class",
              "tp-partition tp-codegroup_label checked"
          : "";
        let _tabslist = dom.querySelectorAll("div.tp-code_main");
        let oldSelectDom = dom.querySelector(
          "div.tp-code_main[contenteditable=true]"
        oldSelectDom
          ? oldSelectDom.setAttribute("contenteditable", false) ||
            (oldSelectDom.style.maxHeight = "0px")
          : "";
        let newSelectDom = _tabslist[_idex];
        newSelectDom
          ? newSelectDom.setAttribute("contenteditable", true) ||
            (newSelectDom.style.maxHeight = "10000px")
          : "";
const setupWebComponent = (win: any, doc: Document, editor: any) => {
  const template = doc.createElement("template");
  const staticStyle = document.createElement("style"); //固定样式 作于影子节点（根节点）
  const customStyle = 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 class="tp-codegroup_main">
        <slot name="content" ></slot>
  </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_Components
  class TpCodegroup extends win.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/attachShadow
      const shadow = this.attachShadow({ mode: "open" }); //closed
      template.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");
    static get observedAttributes() {
      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/define
  try {
    win.customElements.define("tp-codegroup", TpCodegroup); //定义了一个自定义元素
  } catch {}
const parserFn = (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;
    let placeTop = new tinymce.html.Node("div", 1);
    _node.name = "p";
    _node.wrap(placeTop);
    _node = _nextNode;
  let codegroupMainFirst = node.lastChild.firstChild;
  while (codegroupMainFirst && codegroupMainFirst.name === "label") {
    let codegroupMainFirstNext = codegroupMainFirst.next.next;
    codegroupMainFirst.remove();
    codegroupMainFirst = codegroupMainFirstNext;
  node.firstChild.unwrap();
  node.type = 1;
  node.name = "tp-codegroup";
const serializerFn = (node: any) => {
  //序列化组件标签
  node.attr({
    "data-mce-tp-codegroup": null,
    "data-tp-codegroup": "tp-codegroup",
    contenteditable: null,
    class: "tp-codegroup",
  let placeTop = new tinymce.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;
  let cloneNodeList = [];
  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(
      new tinymce.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;
    let placeInput = new tinymce.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(
        new tinymce.html.DomParser().parse(cloneNodeList[_count]),
        _lastNode,
      _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";
var global$11 = tinymce.util.Tools.resolve("tinymce.util.I18n");
var global$6 = tinymce.util.Tools.resolve("tinymce.util.XHR");
export const initPlugin = (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) {}
    const doc = editor.getDoc();
    const win = 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);

三种插件开发模式，带你玩废tinymce

三种插件开发模式，带你玩废tinymce

前言

利用tinymce官方提供的 UI 组件扩展

利用iframe引入自定义功能页面

利用 webCompontents 硬核扩展

什么是 Web Components？

Web Components生命周期

实现 web components 的基本方法

tinymce 相关配置和API

硬核实现开始