我的 jquery execCommand 无法正常工作

Question

我有这个文本编辑器，它是使用 jquery 和 execCommand 以及 div 和 contenteditable 但上面的某些内容不起作用，只有 undo 和 redo 起作用。这是我的代码

<li data-role="bold" class="bold_str"><span><i class="fa fa-bold"></i></span></li>
<li data-role="strikeThrough" class="strike_str"><span><i class="fa fa-strikethrough"></i></span></li>
<li data-role="underline" class="underline_str"><span><i class="fa fa-underline"></i></span></li>
<li data-role="undo" class="undo_str"><span><i class="fa fa-undo"></i></span></li>
<li data-role="redo" class="redo_str"><span><i class="fa fa-redo"></i></span></li>


<div class="output_wp">
   <div class="output" id="output" contenteditable></div>
</div>


<script>
   $('li[data-role]').click(function () {
       document.execCommand($(this).data("role"), false);
    })
</script>

当我突出显示文本时，粗体、删除线和下划线不起作用contenteditable div 并单击 li 按钮

我在这里做什么，因为控制台没有显示任何错误，而且每当我单击 li 时，highlight 就会消失，什么也没有会发生

Answer 1

（值得指出的是，execCommand 是 obsolete, and should not be used. See the answers to this question 更多当前的替代品。）

execCommand作用于“当前可编辑区域”。单击 li 会将焦点从可编辑区域移开，因此在您的代码运行时，没有可操作的当前可编辑区域。

您可以通过触发 mousedown 动作而不是点击动作来解决这个问题，这样它会在浏览器焦点改变之前触发：

$('li[data-role]').mousedown(function() {
  document.execCommand($(this).data("role"), false);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li data-role="bold" class="bold_str">Bold</li>
<li data-role="strikeThrough" class="strike_str">Strikethrough</li>
<li data-role="underline" class="underline_str">Underline</li>
<li data-role="undo" class="undo_str">Undo</li>
<li data-role="redo" class="redo_str">Redo</li>


<div class="output_wp">
  <div class="output" id="output" contenteditable>lorem ipsum lorem ipsum</div>
</div>

我的 jquery execCommand 无法正常工作

My jquery execCommand isn't working as i want

html

jquery

contenteditable

execcommand