xiangan_pc/src/components/hm-crf/tinymce/plugins/hm_checkbox/plugin.js

import {
  loadJS_ifrEditArea,
  loadCSS_ifrEditArea,
  isPlugin,
  // updateElm,
  updateAttrib,
  getIdByClassName,
  __assign,
  isElm
  // dataFormToElmPartStr,
  // elmToDataForm,
  // hasElm
}
  from '../hm_utils/index'

(function() {
  'use strict'

  const pluginOptions = {
    jsArr: [],
    cssArr: [],
    name: 'hmcheckbox',
    className: 'hmcheckbox', // 判断依据，建议和name值一致
    cmdName: 'cmdhmcheckbox',
    editName: 'hmcheckbox_edit',
    dataForm: {
      'data-hm_id': '',
      'data-hm_type': 'checkbox',
      'label': '',
      'value': ''
    }
  }

  const global = tinymce.util.Tools.resolve('tinymce.PluginManager')

  // 初始设置
  const setup = function(editor) {
    // 编辑器初始化后执行
    editor.on('init', function() {
      loadJS_ifrEditArea(editor, pluginOptions.jsArr)
      loadCSS_ifrEditArea(editor, pluginOptions.cssArr)
    })
    // 右键菜单，选定目标
    editor.on('contextmenu', function(evt) {
      const elm = evt.target
      editor.selection.select(elm)
    }, true)
  }

  const open = function(editor) {
    editor.windowManager.open({
      title: '新增',
      size: 'normal', // 'normal', 'medium' or 'large'
      body: {
        type: 'panel',
        items: [
          {
            type: 'input',
            name: 'data-hm_id',
            label: '组号',
            placeholder: '分组编号'
          },
          {
            type: 'input',
            name: 'label',
            label: '选项名'
          },
          {
            type: 'input',
            name: 'value',
            label: '选项值'
          }
        ]

      },
      initialData: elmToDataForm(editor, pluginOptions.dataForm, pluginOptions.className),
      buttons: [
        {
          type: 'cancel',
          name: 'cancel',
          text: '取消'
        },
        {
          type: 'submit',
          name: 'save',
          text: '确定',
          primary: true
        }
      ],
      onSubmit: function(api) {
        const dataForm = api.getData()
        dataForm['data-hm_type'] = pluginOptions.dataForm['data-hm_type']
        const hmType = dataForm['data-hm_type']
        const className = pluginOptions.className
        const elm = editor.selection.getNode()

        let elm_input, elm_label
        if (elm.className.indexOf(className + '-label') >= 0) {
          elm_input = isElm(elm.previousElementSibling, 'data-hm_type', hmType) ? elm.previousElementSibling : undefined
          elm_label = elm
        } else if (elm.className.indexOf(className) >= 0 && isElm(elm, 'data-hm_type', hmType)) {
          elm_input = elm
          elm_label = isElm(elm.nextElementSibling, 'data-hm_type', hmType) ? elm.previousElementSibling : undefined
        }

        if (elm && isPlugin(elm, className)) {
          // 更新
          updateElm(editor, elm_input, elm_label, dataForm, changeHandler)
          api.close()
        } else {
          // 插入
          insertElm(editor, dataForm)
          api.close()
        }
      }
    })
  }

  const elmToDataForm = function(editor, initDataForm, pluginClassName) {
    const elm = editor.selection.getNode()
    const dataForm = __assign({}, initDataForm)
    const hmType = initDataForm['data-hm_type']
    if (isPlugin(elm, pluginClassName)) {
      let elm_input, elm_label
      if (elm.className.indexOf(pluginClassName + '-label') >= 0) {
        elm_input = isElm(elm.previousElementSibling, 'data-hm_type', hmType) ? elm.previousElementSibling : undefined
        elm_label = elm
      } else if (elm.className.indexOf(pluginClassName) >= 0 && isElm(elm, 'data-hm_type', hmType)) {
        elm_input = elm
        elm_label = isElm(elm.nextElementSibling, 'data-hm_type', hmType) ? elm.previousElementSibling : undefined
      }
      dataForm['data-hm_id'] = elm_input.getAttribute('data-hm_id')
      dataForm['label'] = elm_label.innerText
      dataForm['value'] = elm_input.getAttribute('value')
    }
    return dataForm
  }

  const insertElm = function(editor, dataForm) {
    const doc = editor.contentDocument || editor.contentWindow.document
    const className = pluginOptions.className
    const id = getIdByClassName(doc, className)
    const name = dataForm['data-hm_id']
    const hmType = dataForm['data-hm_type']
    const label = dataForm['label']
    const value = dataForm['value'] || label
    const win = editor.contentWindow

    const domStr_input = `<input type="checkbox" id="${id}" class="${className}" name="${name}" value="${value}" data-hm_id="${name}" data-hm_type="${hmType}">`
    const domStr_label = `<label class="${className}-label" for="${id}">${label}</label></input>`
    editor.insertContent(domStr_input + domStr_label)
    // 渲染控件
    renderElm(doc, win, id, dataForm['data-hm_type'])
  }

  const updateElm = function(editor, elm_input, elm_label, dataForm, changeHandler) {
    const name = dataForm['data-hm_id']
    const label = dataForm['label']
    const value = dataForm['value'] || label
    if (elm_input) {
      updateAttrib(elm_input, 'name', name)
      updateAttrib(elm_input, 'value', value)
      updateAttrib(elm_input, 'data-hm_id', name)
    }
    if (elm_label) {
      elm_label.innerText = label
    }
  }

  // 编辑控件状态后，触发处理逻辑
  const changeHandler = function(editor, elm, dataForm) {
    const doc = editor.contentDocument || editor.contentWindow.document
    const win = editor.contentWindow
    const id = editor.dom.getAttrib(elm, 'id')

    renderElm(doc, win, id, dataForm['data-hm_type'])
  }

  const renderElm = function(doc, win, id, type) {
  }

  const register = function(editor) {
    editor.addCommand(pluginOptions.cmdName, function() {
      open(editor)
    })
  }

  const register$1 = function(editor) {
    // 工具栏
    editor.ui.registry.addButton(pluginOptions.name, {
      icon: 'checkbox',
      title: '复选框',
      tooltip: '复选框',
      onAction: function() {
        open(editor)
      },
      onSetup: function(buttonApi) {
      }
    })
    // 菜单栏
    editor.ui.registry.addMenuItem(pluginOptions.name, {
      icon: 'checkbox',
      text: '复选框',
      onAction: function() {
        open(editor)
      }
    })

    // 菜单栏（编辑）
    editor.ui.registry.addMenuItem(pluginOptions.editName, {
      icon: 'checkbox',
      text: '编辑',
      onAction: function() {
        open(editor)
      }
    })

    editor.ui.registry.addContextMenu(pluginOptions.name, {
      update: function(elm) {
        return isPlugin(elm, pluginOptions.className) ? [pluginOptions.editName] : []
      }
    })
  }

  function Plugin() {
    global.add(pluginOptions.name, function(editor) {
      setup(editor)
      register(editor)
      register$1(editor)
    })
  }

  Plugin()
}())