这是可能的编写自己的热键内容可编辑的HTML Jquery

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

本文关键字：编辑 HTML Jquery 自己的      更新时间：2023-09-26

实际上，如果我们在content edit中使用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>

请帮忙解决这个问题，提前谢谢。

使用jQuery非常简单:

你可以添加keydown-EventListener到每个contentitable元素(或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>

这个事件监听器只会在contentitable元素被聚焦时触发，所以如果它没有被聚焦，你的组合键的标准浏览器功能仍然会被触发。

已测试chrome, firefox和ie的最新版本

下面是使用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.

相关文章：