Как выполнить команду из li?

Question

Я теряю акцент на contentEditable, когда выбирается моя опция li меню, поэтому, когда я пытаюсь выполнить 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();
});

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

Это создает окно с предупреждением о событии щелчка, поэтому вы знаете, что щелчок регистрируется.

скрипка