我的 jquery execCommand 没有按我的意愿工作答案

【问题标题】：My jquery execCommand isn't working as i want我的 jquery execCommand 没有按我的意愿工作
【发布时间】：2021-02-26 10:42:02
【问题描述】：

我有这个文本编辑器，我使用带有 execCommand 的 jquery 和带有 contenteditable 的 div 创建了这个文本编辑器，但其中的一些并不能正常工作撤消和重做正在工作。这是我的代码

<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 就会消失，什么也不会发生

【问题讨论】：

标签： html jquery contenteditable execcommand

【解决方案1】：

（值得指出的是 execCommand 是 obsolete，不应使用。有关更多当前替代方案，请参阅this question 的答案。）

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

您可以通过在鼠标按下而不是单击时触发操作来解决此问题，因此它会在浏览器焦点更改之前触发：

$('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>

【讨论】：