javascript - 如何从 li 执行命令？

Question

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

更新: ** jsFiddle **

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");
});

Answer 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();
});