javascript - 如何让 Ctrl + Q 在 contenteditable DIV 中添加 html？

Question

我有这个 div，默认情况下它接受 ctrl + u 来下划线，但我想在按下 ctrl + q 时向其添加自定义 html。

<div id="dvMy" contenteditable="true"></div>

Answer 1

您可以使用 jQuery 热键以老式方式执行此操作:

$('#dvMy').bind('keypress.ctrl_q', customFxToEditDiv);

或者，如果要使用超过 1 个键盘快捷键，那么检查 mousetrap.js 确实值得 - 它有一个非常好的键盘快捷键 DSL，并处理许多细节和陷阱，如果尝试这样做，这些细节和陷阱并不那么明显你自己。也值得这个很棒的网址:http://craig.is/killing/mice

  Mousetrap.bind('ctrl+q', function(e) {
    $('#dvMy').html('<p>Custom content</p>');
  });