com.kasite.client.uniapp.modules/plugins/editable/uni-app/index.js

/**
 * @fileoverview editable 插件
 */
const config = require('./config')
const Parser = require('../parser')

function Editable (vm) {
  this.vm = vm
  this.editHistory = [] // 历史记录
  this.editI = -1 // 历史记录指针
  vm._mask = [] // 蒙版被点击时进行的操作

  vm._setData = function (path, val) {
    const paths = path.split('.')
    let target = vm
    for (let i = 0; i < paths.length - 1; i++) {
      target = target[paths[i]]
    }
    vm.$set(target, paths.pop(), val)
  }

  /**
   * @description 移动历史记录指针
   * @param {Number} num 移动距离
   */
  const move = num => {
    setTimeout(() => {
      const item = this.editHistory[this.editI + num]
      if (item) {
        this.editI += num
        vm._setData(item.key, item.value)
      }
    }, 200)
  }
  vm.undo = () => move(-1) // 撤销
  vm.redo = () => move(1) // 重做

  /**
   * @description 更新记录
   * @param {String} path 更新内容路径
   * @param {*} oldVal 旧值
   * @param {*} newVal 新值
   * @param {Boolean} set 是否更新到视图
   * @private
   */
  vm._editVal = (path, oldVal, newVal, set) => {
    // 当前指针后的内容去除
    while (this.editI < this.editHistory.length - 1) {
      this.editHistory.pop()
    }

    // 最多存储 30 条操作记录
    while (this.editHistory.length > 30) {
      this.editHistory.pop()
      this.editI--
    }

    const last = this.editHistory[this.editHistory.length - 1]
    if (!last || last.key !== path) {
      if (last) {
        // 去掉上一次的新值
        this.editHistory.pop()
        this.editI--
      }
      // 存入这一次的旧值
      this.editHistory.push({
        key: path,
        value: oldVal
      })
      this.editI++
    }

    // 存入本次的新值
    this.editHistory.push({
      key: path,
      value: newVal
    })
    this.editI++

    // 更新到视图
    if (set) {
      vm._setData(path, newVal)
    }
  }

  /**
   * @description 获取菜单项
   * @private
   */
  vm._getItem = function (node, up, down) {
    let items
    let i
    if (node === 'color') {
      return config.color
    }
    if (node.name === 'img') {
      items = config.img.slice(0)
      if (!vm.getSrc) {
        i = items.indexOf('换图')
        if (i !== -1) {
          items.splice(i, 1)
        }
        i = items.indexOf('超链接')
        if (i !== -1) {
          items.splice(i, 1)
        }
        i = items.indexOf('预览图')
        if (i !== -1) {
          items.splice(i, 1)
        }
      }
      i = items.indexOf('禁用预览')
      if (i !== -1 && node.attrs.ignore) {
        items[i] = '启用预览'
      }
    } else if (node.name === 'a') {
      items = config.link.slice(0)
      if (!vm.getSrc) {
        i = items.indexOf('更换链接')
        if (i !== -1) {
          items.splice(i, 1)
        }
      }
    } else if (node.name === 'video' || node.name === 'audio') {
      items = config.media.slice(0)
      i = items.indexOf('封面')
      if (!vm.getSrc && i !== -1) {
        items.splice(i, 1)
      }
      i = items.indexOf('循环')
      if (node.attrs.loop && i !== -1) {
        items[i] = '不循环'
      }
      i = items.indexOf('自动播放')
      if (node.attrs.autoplay && i !== -1) {
        items[i] = '不自动播放'
      }
    } else if (node.name === 'card') {
      items = config.card.slice(0)
    } else {
      items = config.node.slice(0)
    }
    if (!up) {
      i = items.indexOf('上移')
      if (i !== -1) {
        items.splice(i, 1)
      }
    }
    if (!down) {
      i = items.indexOf('下移')
      if (i !== -1) {
        items.splice(i, 1)
      }
    }
    return items
  }

  /**
   * @description 显示 tooltip
   * @param {object} obj
   * @private
   */
  vm._tooltip = function (obj) {
    vm.$set(vm, 'tooltip', {
      top: obj.top,
      items: obj.items
    })
    vm._tooltipcb = obj.success
  }

  /**
   * @description 显示滚动条
   * @param {object} obj
   * @private
   */
  vm._slider = function (obj) {
    vm.$set(vm, 'slider', {
      min: obj.min,
      max: obj.max,
      value: obj.value,
      top: obj.top
    })
    vm._slideringcb = obj.changing
    vm._slidercb = obj.change
  }

  /**
   * @description 显示颜色选择
   * @param {object} obj
   * @private
   */
  vm._color = function (obj) {
    vm.$set(vm, 'color', {
      items: obj.items,
      top: obj.top
    })
    vm._colorcb = obj.success
  }

  /**
   * @description 点击蒙版
   * @private
   */
  vm._maskTap = function () {
    // 隐藏所有悬浮窗
    while (vm._mask.length) {
      (vm._mask.pop())()
    }
    if (vm.tooltip) {
      vm.$set(vm, 'tooltip', null)
    }
    if (vm.slider) {
      vm.$set(vm, 'slider', null)
    }
    if (vm.color) {
      vm.$set(vm, 'color', null)
    }
  }

  /**
   * @description 插入节点
   * @param {Object} node
   */
  function insert (node) {
    if (vm._edit) {
      vm._edit.insert(node)
    } else {
      const nodes = vm.nodes.slice(0)
      nodes.push(node)
      vm._editVal('nodes', vm.nodes, nodes, true)
    }
  }

  /**
   * @description 在光标处插入指定 html 内容
   * @param {String} html 内容
   */
  vm.insertHtml = html => {
    this.inserting = true
    const arr = new Parser(vm).parse(html)
    this.inserting = undefined
    for (let i = 0; i < arr.length; i++) {
      insert(arr[i])
    }
  }

  /**
   * @description 在光标处插入图片
   */
  vm.insertImg = function () {
    vm.getSrc && vm.getSrc('img').then(src => {
      if (typeof src === 'string') {
        src = [src]
      }
      const parser = new Parser(vm)
      for (let i = 0; i < src.length; i++) {
        insert({
          name: 'img',
          attrs: {
            src: parser.getUrl(src[i])
          }
        })
      }
    }).catch(() => { })
  }

  /**
   * @description 在光标处插入一个链接
   */
  vm.insertLink = function () {
    vm.getSrc && vm.getSrc('link').then(url => {
      insert({
        name: 'a',
        attrs: {
          href: url
        },
        children: [{
          type: 'text',
          text: url
        }]
      })
    }).catch(() => { })
  }

  /**
   * @description 在光标处插入一个表格
   * @param {Number} rows 行数
   * @param {Number} cols 列数
   */
  vm.insertTable = function (rows, cols) {
    const table = {
      name: 'table',
      attrs: {
        style: 'display:table;width:100%;margin:10px 0;text-align:center;border-spacing:0;border-collapse:collapse;border:1px solid gray'
      },
      children: []
    }
    for (let i = 0; i < rows; i++) {
      const tr = {
        name: 'tr',
        attrs: {},
        children: []
      }
      for (let j = 0; j < cols; j++) {
        tr.children.push({
          name: 'td',
          attrs: {
            style: 'padding:2px;border:1px solid gray'
          },
          children: [{
            type: 'text',
            text: ''
          }]
        })
      }
      table.children.push(tr)
    }
    insert(table)
  }

  /**
   * @description 插入视频/音频
   * @param {Object} node
   */
  function insertMedia (node) {
    if (typeof node.src === 'string') {
      node.src = [node.src]
    }
    const parser = new Parser(vm)
    // 拼接主域名
    for (let i = 0; i < node.src.length; i++) {
      node.src[i] = parser.getUrl(node.src[i])
    }
    insert({
      name: 'div',
      attrs: {
        style: 'text-align:center'
      },
      children: [node]
    })
  }

  /**
   * @description 在光标处插入一个视频
   */
  vm.insertVideo = function () {
    vm.getSrc && vm.getSrc('video').then(src => {
      insertMedia({
        name: 'video',
        attrs: {
          controls: 'T'
        },
        children: [],
        src,
        // #ifdef APP-PLUS
        html: `<video src="${src}" style="width:100%;height:100%"></video>`
        // #endif
      })
    }).catch(() => { })
  }

  /**
   * @description 在光标处插入一个音频
   */
  vm.insertAudio = function () {
    vm.getSrc && vm.getSrc('audio').then(attrs => {
      let src
      if (attrs.src) {
        src = attrs.src
        attrs.src = undefined
      } else {
        src = attrs
        attrs = {}
      }
      attrs.controls = 'T'
      insertMedia({
        name: 'audio',
        attrs,
        children: [],
        src
      })
    }).catch(() => { })
  }

  /**
   * @description 在光标处插入一段文本
   */
  vm.insertText = function () {
    insert({
      name: 'p',
      attrs: {},
      children: [{
        type: 'text',
        text: ''
      }]
    })
  }

  /**
   * @description 清空内容
   */
  vm.clear = function () {
    vm._maskTap()
    vm._edit = undefined
    vm.$set(vm, 'nodes', [{
      name: 'p',
      attrs: {},
      children: [{
        type: 'text',
        text: ''
      }]
    }])
  }

  /**
   * @description 获取编辑后的 html
   */
  vm.getContent = function () {
    let html = '';
    // 递归遍历获取
    (function traversal (nodes, table) {
      for (let i = 0; i < nodes.length; i++) {
        let item = nodes[i]
        if (item.type === 'text') {
          html += item.text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\n/g, '<br>').replace(/\xa0/g, '&nbsp;') // 编码实体
        } else {
          if (item.name === 'img') {
            item.attrs.i = ''
            // 还原被转换的 svg
            if ((item.attrs.src || '').includes('data:image/svg+xml;utf8,')) {
              html += item.attrs.src.substr(24).replace(/%23/g, '#').replace('<svg', '<svg style="' + (item.attrs.style || '') + '"')
              continue
            }
          } else if (item.name === 'video' || item.name === 'audio') {
            // 还原 video 和 audio 的 source
            item = JSON.parse(JSON.stringify(item))
            if (item.src.length > 1) {
              item.children = []
              for (let j = 0; j < item.src.length; j++) {
                item.children.push({
                  name: 'source',
                  attrs: {
                    src: item.src[j]
                  }
                })
              }
            } else {
              item.attrs.src = item.src[0]
            }
          } else if (item.name === 'div' && (item.attrs.style || '').includes('overflow:auto') && (item.children[0] || {}).name === 'table') {
            // 还原滚动层
            item = item.children[0]
          }
          // 还原 table
          if (item.name === 'table') {
            item = JSON.parse(JSON.stringify(item))
            table = item.attrs
            if ((item.attrs.style || '').includes('display:grid')) {
              item.attrs.style = item.attrs.style.split('display:grid')[0]
              const children = [{
                name: 'tr',
                attrs: {},
                children: []
              }]
              for (let j = 0; j < item.children.length; j++) {
                item.children[j].attrs.style = item.children[j].attrs.style.replace(/grid-[^;]+;*/g, '')
                if (item.children[j].r !== children.length) {
                  children.push({
                    name: 'tr',
                    attrs: {},
                    children: [item.children[j]]
                  })
                } else {
                  children[children.length - 1].children.push(item.children[j])
                }
              }
              item.children = children
            }
          }
          html += '<' + item.name
          for (const attr in item.attrs) {
            let val = item.attrs[attr]
            if (!val) continue
            if (val === 'T' || val === true) {
              // bool 型省略值
              html += ' ' + attr
              continue
            } else if (item.name[0] === 't' && attr === 'style' && table) {
              // 取消为了显示 table 添加的 style
              val = val.replace(/;*display:table[^;]*/, '')
              if (table.border) {
                val = val.replace(/border[^;]+;*/g, $ => $.includes('collapse') ? $ : '')
              }
              if (table.cellpadding) {
                val = val.replace(/padding[^;]+;*/g, '')
              }
              if (!val) continue
            }
            html += ' ' + attr + '="' + val.replace(/"/g, '&quot;') + '"'
          }
          html += '>'
          if (item.children) {
            traversal(item.children, table)
            html += '</' + item.name + '>'
          }
        }
      }
    })(vm.nodes)

    // 其他插件处理
    for (let i = vm.plugins.length; i--;) {
      if (vm.plugins[i].onGetContent) {
        html = vm.plugins[i].onGetContent(html) || html
      }
    }

    return html
  }
}

Editable.prototype.onUpdate = function (content, config) {
  if (this.vm.editable) {
    this.vm._maskTap()
    config.entities.amp = '&'
    if (!this.inserting) {
      this.vm._edit = undefined
      if (!content) {
        setTimeout(() => {
          this.vm.$set(this.vm, 'nodes', [{
            name: 'p',
            attrs: {},
            children: [{
              type: 'text',
              text: ''
            }]
          }])
        }, 0)
      }
    }
  }
}

Editable.prototype.onParse = function (node) {
  // 空白单元格可编辑
  if (this.vm.editable && (node.name === 'td' || node.name === 'th') && !this.vm.getText(node.children)) {
    node.children.push({
      type: 'text',
      text: ''
    })
  }
}

module.exports = Editable