Question

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

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

Answer 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

如何从李执行命令？

2 个答案: