是否可以为 HTML Jquery 中可编辑的内容编写自己的热键？

Question

实际上，如果我们在可编辑的内容中使用 Ctrl+B，它将创建一个标签

<b>Content goes here... </b> like this.

我们可以添加自己的热键吗，例如

Ctrl+T

<a class="tamil">Content goes here...</a>

Ctrl+E

<a class="tamil">Content goes here...</a>

请帮忙解决这个问题，先谢谢了。

Answer 1

使用 jQuery 非常简单：

您可以将 keydown-EventListener 添加到每个 contenteditable 元素（或只是 div，任何适合您的目的），您甚至可以在其中消除标准浏览器行为：

$('[contenteditable=true]').keydown(function(e){
    if(e.ctrlKey && e.keyCode == 70){
        e.preventDefault();
        $('#result').append('CTRL + F registered. ');
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div contenteditable=true>
    <p>Some text in here</p>    
</div>

<p id="result"></p>

此事件侦听器仅在 contenteditable 元素获得焦点时才会触发，因此如果它未获得焦点，组合键的标准浏览器功能仍会触发。

已针对 chrome、firefox 和 ie.

的最新版本进行测试

Answer 2

这是使用 ctrl+q 的完整工作代码

$(document).keyup(function(e){
    if(e.ctrlKey && e.keyCode == 81){
   var selection= window.getSelection().getRangeAt(0);
      var selectedText = selection.extractContents();
      var anc= document.createElement("a");
      anc.setAttribute('id','tamil');
      anc.appendChild(selectedText);
      selection.insertNode(anc);
   }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Here is a text to work with.

是否可以为 HTML Jquery 中可编辑的内容编写自己的热键？

Is this possible to write own hotkey for content editable in HTML Jquery?

html

javascript

css

jquery

contenteditable