thoth-frontend-test/src/components/input/editor.vue

<template>
  <div>
    <article :id="id" :style="styles">
      <a id="edit-btn" href="javascript:;" @click="() => styleHandle('bold')">加粗</a>
      <a id="edit-btn" href="javascript:;" @click="() => styleHandle('italic')">italic</a>
      <a id="edit-btn" href="javascript:;" @click="() => styleHandle('enableInlineTableEditing')">表格</a>
      <a id="edit-btn" href="javascript:;" @click="() => styleHandle('backColor', '#666')">背景颜色</a>
      <a id="edit-btn" href="javascript:;" @click="() => insertTable()">插入表格</a>
      <div :id="'editor_'+id" contenteditable="true" style="display:inline-block;border:1px solid #eee; width:200px; height:200px" class="editor" v-html="value">
        <p>12321</p>
      </div>
      <!-- <div :id="'tinymce_'+id" class="editor" contenteditable="true" style="display:inline-block;border:1px solid #eee; width:300px; height:200px">
        <p>12321</p>
      </div> -->
      <div id="menu">
        <div class="menu" @click.stop="getCursorPosition">功能1</div>
        <div class="menu">功能2</div>
        <div class="menu">功能3</div>
        <div class="menu">功能4</div>
        <div class="menu">功能5</div>
      </div>
    </article>
  </div>
</template>
<script>
export default {
  props: {
    id: {
      type: String,
      default: '',
      required: true
    },
    value: {
      type: String,
      default: '',
      required: false
    },
    height: {
      type: Number,
      default: 200,
      required: false
    },
    styles: {
      type: Object,
      default: () => {
        return { }
      },
      required: false
    }
  },
  data() {
    return {
      inputValue: '',
      edit: false,
      init: {
        auto_focus: true,
        language_url: '/tinymce/langs/zh_CN.js',
        language: 'zh_CN',
        skin_url: '/tinymce/skins/ui/oxide', // 编辑器需要一个skin才能正常工作，所以要设置一个skin_url指向之前复制出来的skin文件
        height: this.height,
        browser_spellcheck: true, // 拼写检查
        branding: false, // 去水印
        elementpath: false, // 禁用编辑器底部的状态栏
        statusbar: false, // 隐藏编辑器底部的状态栏
        paste_data_images: true, // 允许粘贴图像
        menubar: false, // 隐藏最上方menu
        fontsize_formats: '14px 16px 18px 20px 24px 26px 28px 30px 32px 36px', // 字体大小
        file_picker_types: 'image',
        images_upload_credentials: true,
        plugins: 'lists table textcolor wordcount contextmenu', // 引入插件
        toolbar: 'bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent table | undo redo | removeformat formatselect',
        table_toolbar: 'tableprops | tableinsertrowbefore tableinsertrowafter tabledeleterow | tableinsertcolbefore tableinsertcolafter tabledeletecol | tablemergecells tablesplitcells'
      }
    }
  },
  watch: {
    value: {
      handler(newV, oldV) {
        this.inputValue = newV
      },
      immediate: true
    }
  },
  mounted() {
    const editor = document.getElementById(`editor_${this.id}`)
    editor.oncontextmenu = function(e) {
      // 取消默认的浏览器自带右键 很重要！！
      e.preventDefault()

      // 获取我们自定义的右键菜单
      var menu = document.querySelector('#menu')
      // 根据事件对象中鼠标点击的位置，进行定位
      menu.style.left = e.clientX + 'px'
      menu.style.top = e.clientY + 'px'

      // 改变自定义菜单的宽，让它显示出来
      menu.style.width = '125px'
    }
    editor.onclick = function(e) {
      console.log('第几列', e.target.cellIndex + 1, '第几行', e.target.parentNode.rowIndex + 1)
      const ForeColor = document.queryCommandValue('ForeColor') // 字体颜色
      const FontSize = document.queryCommandValue('FontSize') // 字体大小
      const bold = document.queryCommandValue('bold') // 是否加粗
      const italic = document.queryCommandValue('italic')
      const BackgroundColor = document.queryCommandValue('BackColor')
      console.log(ForeColor, FontSize, bold, italic, BackgroundColor, 111)
      console.log('这是table', e.path[3])
      const tableBox = e.path[3]
      console.log(tableBox)
      // 必须保存一下不然下面会变
      // const idx = e.target.cellIndex
      //  在一行添加一行
      // tableBox.insertRow(e.target.parentNode.rowIndex)
      // 插入一列
      console.log(tableBox.rows)
      for (let i = 0; i < tableBox.rows.length; i++) {
        console.log(i, e.target.cellIndex)
        // 在之后插入一列
        // tableBox.rows[i].insertCell(e.target.cellIndex+1)
        // 在之前一列
        // 在之前一列插入
        // tableBox.rows[i].insertCell(idx)
        console.log(tableBox.rows[i])
      }
      // tableBox.rows[e.target.parentNode.rowIndex].insertCell()
      // 用户触发click事件就可以关闭了，因为绑定在window上，按事件冒泡处理，不会影响菜单的功能
      document.querySelector('#menu').style.width = 0
    }
  },
  methods: {
    changeText(e) { // 富文本内容改变
      this.inputValue = e
      this.$emit('update:value', this.inputValue)
      this.$emit('change', this.inputValue)
    },
    styleHandle(aCommandName, val) {
      // const editor = document.getElementById('cc')
      document.execCommand(aCommandName, false, val)
    },
    insertTable() {
      const HTML = `<table border='1' border-collapse: collapse; style='border-color: #666;width:90%'>
      <tr>
        <td><span>123</span></td>
        <td>1</td>
        <td>3</td>
      </tr>
      <tr>
        <td><span>1233</span></td>
        <td>4</td>
        <td>5</td>
      </tr>
      <tr>
        <td><span>1235</span></td>
        <td>6</td>
        <td>7</td>
      </tr>
      </table>`

      document.execCommand('insertHTML', false, HTML)
    },
    getCursorPosition(event) {
      const editEl = event.target
      // return console.log(editEl);
      if (editEl.selectionStart || editEl.selectionStart === 0) {
        // 非IE浏览器
        this.cursorPosition = editEl.selectionStart
      } else {
        // IE
        const range = document.selection.createRange()
        range.moveStart('character', -editEl.value.length)
        this.cursorPosition = range.text.length
      }
      console.log(this.cursorPosition)
    }
  }
}
</script>
<style scoped lang="scss">
.editor {
  border: 1px solid #666;
}
#menu{
  width: 0; /*设置为0 隐藏自定义菜单*/
  height: 125px;
  overflow: hidden; /*隐藏溢出的元素*/
  box-shadow: 0 1px 1px #888,1px 0 1px #ccc;
  position: absolute; /*自定义菜单相对与body元素进行定位*/
}
.menu{
  width: 130px;
  height: 25px;
  line-height: 25px;
  padding: 0 10px;
  cursor: pointer;
}
</style>