如何从li执行命令？答案

【问题标题】：How to execCommand from li?如何从li执行命令？
【发布时间】：2013-11-21 02:06:53
【问题描述】：

单击菜单 li 选项时，我失去了对 contentEditable 的关注，因此当我尝试执行命令时，选择不再存在并且不会影响选择。如何在不添加输入的情况下解决此问题？

HTML

<div contenteditable=true>
    paragraph1<br/>
    paragraph2<br/>
    paragraph3
</div>
<div contenteditable=true>
    paragraph4<br/>
    paragraph5<br/>
    paragraph6
</div>
<input type=button id=show value=ToggleMenu>
<ul id=submenu>
    <li>p</li>
    <li>h1</li>
    <li>h2</li>
</ul>

Javascript

$("#show").on("click",function(){
    $("#submenu").toggle();
});
$("#submenu").on("click","li",function(){  //when this is clicked, editable div loses focus.
    document.execCommand("formatBlock", false, $(this).text());
    console.log($(this).text(), "was clicked");
});

【问题讨论】：

我猜你最好的选择是use a button。
@Teemu 是的，我想是的，我试图避免这种情况，但无论如何谢谢。
您是否尝试在单击处理程序中的 execCommand 之前将 contenteditable 聚焦？
@rgthree 我不知道具体怎么做，因为页面中有好几个这样的容器，你有例子吗？

标签： javascript jquery contenteditable submenu execcommand

【解决方案1】：

您可以执行以下操作：

使用mousedown 而不是click
阻止默认事件行为
获取<li>的相关内容
致电document.execCommand()

演示：http://jsfiddle.net/timdown/SNTyY/13/

代码：

var $submenu = $("#submenu");

$("#show").on("click",function(){
    $submenu.toggle();
});

$submenu.mousedown("li",function(e){
    var li = e.target;
    e.preventDefault();
    document.execCommand("formatBlock", false, $(li).text());
});

$submenu.click(function(e) {
    e.preventDefault();
});

【讨论】：

当点击下面的选项时，contentEditable div upside 的最后一段必须改变。
我很困惑。我试图从代码中找出你的意图，但显然弄错了。
别担心，我可能没有很好地解释自己。

【解决方案2】：

您的代码的一个问题是它不符合 HTML。例如，子菜单应该是

<ul id = 'submenu'>
  <li>p</li>
  <li>h1</li>
  <li>h2</li>
</ul>

不要使用li 作为点击事件的选择器，试试

$("#submenu").on("click", "li", function(){
   document.execCommand("formatBlock", false, $(this).text());
   alert($(this).text());
});

这会在点击事件上引发一个警告框，因此您知道点击正在注册。

Fiddle

【讨论】：

点击注册，可以在浏览器控制台看到console.log。我对 div 感到抱歉，我在 5 分钟前才注意到并更正了。尽管如此，execCommand 仍然无法在 div 上运行。
“不符合 HTML”是什么意思？ OP 的 HTML 是完全有效的。属性周围的引号通常是可选的。
@TimDown，如果您查看编辑历史记录，现在的 <ul id = "submenu"> 实际上是带有 <li> 子元素的 <div id = "submenu">。
@Jason：那么公平：）对不起。