如何使用keybindins和所选文本建立链接

Question

我正在寻找一种方法来 CTRL - L ，弹出一个框以在所选文本上插入一个链接。就像StackExchange编辑器一样，我现在正在使用它！

链接最好有效html，如果我可以同时选择MarkDown和有效html，那就太棒了！

我无法在SO或者互联网上找到它。

我之前做过的事情：

$("#mark").click(function () {
   var range = window.getSelection().getRangeAt(0);
   var newNode = document.createElement('mark');
   range.surroundContents(newNode);    
   return false;  
});

按钮：

<a href="javascript:void(0)" id="mark">mark</a>

点击mark按钮后，它会将HTML mark标记应用于

<mark>selected text</mark>

我想和stackexchange编辑器一样feaute： CTRL - L 得到这个框：

---

修改

我的新代码：

使用javascript ^[1] 播放提示框时，我设法按照我想要的方式使用它。

<button onclick="link()">Link</button>

<p id="demo"></p>

<script>
function link() {
    var link = prompt("Insert hyperlink", "http://");
    var title = prompt("Insert hyperlink title", "title");
    var name = prompt("Insert hyperlink name", "name");

    if (link != null) {
        document.getElementById("demo").innerHTML =
        "\<a href=\"" + link + "\" title=\" " + title + " \"> " + name + " </a>";
    }
}
</script>

jsfiddle

试图开始工作：

• 要在插入链接时获取html title标记的内容。

  示例：

  ＆lt; a href =＆＃34; https://www.example.nl/example" title =＆＃34; * link *：* title *＆＃34;＆gt; * title *＆lt; / a＆gt;

参考：

1. Tryit Editor v2.2

Answer 1

使用jQuery，您可以使用on keydown触发器来捕获按下的键，如下所示：

$('#your_textarea').on('keydown', function(e){
    //Check if it was CTRL-L
    if(e.keyCode == 76 && e.ctrlKey)
    {
        var link = prompt("Enter a link : ");
    }
});

现在，用户输入的链接位于link变量中。你可以用它做你想做的事情（例如：将它附加到编辑器的textarea）。

注意：您必须使用keydown事件，keypressed和keyup事件将无效。

这是一个小提琴：http://jsfiddle.net/js1p5h9n/