document.execCommand('bold')无效。

Question

想使用document.execCommand()来实现一个简单的富文本编辑器。但是 'bold','insertOrderedList','insertUnorderedList'都不起作用。

代码如下：

<div class="richedit">
  <div class="edit-controller">
    <button v-for="command in execCommands" @click="execCommand(command)" class="command-button">
      <svg class="icon" aria-hidden="true" >
        <use :xlink:href="command.icon"></use>
      </svg>
    </button>
  </div>
  <div ref="editable" class="editable" contenteditable="true" @keyup.ctrl.enter="postComment"></div>
</div>

用到的数据如下：

  execCommands: [{
    icon: '#icon-blod',
    command: 'bold'
  },
  {
    icon: '#icon-i',
    command: 'italic'
  },
  {
    icon: '#icon-xiahuaxian',
    command: 'underline'
  },
  {
    icon: '#icon-lianjie',
    command: 'createlink'
  },
  {
    icon: '#icon-wuxuliebiao',
    command: 'insertUnorderedList'
  },
  {
    icon: '#icon-icxiangmufuhaodaishuzi24px',
    command: 'insertOrderedList'
  },
  {
    icon: '#icon-yinyong',
    command: 'formatblock'
  },
  {
    icon: '#icon-chexiao',
    command: 'undo'
  },
  {
    icon: '#icon-zhongzuo',
    command: 'redo'
  }]

execCommand方法如下：

execCommand (command) {
  const cmd = command.command
  switch (cmd) {
    case 'createlink':
      const linkURL = prompt('输入链接:', 'https://')
      const sText = document.getSelection()
      // '<a href="' + linkURL + '" target="_blank">' + sText + '</a>'
      document.execCommand('insertHTML', false, `<a href="${linkURL}" target="_blank">${sText}</a>`)
      break
    case 'formatblock':
      document.execCommand(cmd, false, '<blockquote>')
      break
    default:
      document.execCommand(cmd, false, null)
  }
}

效果如下：

字体加粗、有序列表、无序列表都没有效果。

Answer 1

button元素才支持document.execCommand，div不支持。刚刚解决了这个问题orz（吐血

Answer 2

在什么版本的浏览器下