Question

我正在建立一个精益的＆amp;干净的基于html / js的文本编辑器，类似于Medium的书写工具。我使用contenteditable来使div可编辑。

我想为文字链接添加内联标记（例如，键入[[Google|https://www.google.com]]即时转换为<a href='https:www.google.com'>Google</a>，即Google）。所有这些都应该在运行中发生，即在打字时。也就是说，当用户键入链接标记的第二个结束时或者光标焦点设置在[[text|url]]元素之外时，JS会识别此事件并立即将[[text|url]]转换为html链接。另一方面，如果焦点设置在现有文本链接上（即，在可编辑div中的<a>...</a> html标记内，（1）链接的默认打开行为被阻止，（2）文本链接是立即转换回标记版本进行编辑（例如，Google变为[[Google|https://www.google.com]]）。

我对JS中的正则表达不是很熟悉。知道如何做到这一点？

非常感谢你的帮助。

PS：我使用jQuery 1.11.0

PSS：当退回链接（删除）将链接转换为标记版本并键入结束时，令人厌恶的行为有点类似于此文本编辑器的行为将标记版本转换为链接）。不同之处在于我没有将写入字段与显示的文本分开，所有内容都是内联的。

Answer 1

查看此fiddle。

这只是一个样本。

它会将[[Google|https://www.google.com]]转换为<a href='https://www.google.com'>Google</a>，即Google。

我使用this正则表达式来检测内联标记。

它有一些错误，但我认为它可以帮助您实现所需的功能。

以下是摘录。

$('.editor').keyup(function(e) {
  if (e.keyCode === 221) {
    var text = $('.editor').html();
    var match = /\[\[(.+)\|(https?:\/\/.*\..+)\]\]/g.exec(text);
    if (match !== null) {
      text = text.replace(match[0], "<span><a href='" + match[2] + "'>" + match[1] + "</a></span>");
      $('.editor').html(text);
    }
  }
});

.editor {
  position: absolute;
  border: black dashed 2px;
  left: 5%;
  right: 5%;
  top: 10%;
  bottom: 10%;
  padding: 15px;
  font-family: 'Lucida Console';
  font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="editor" contenteditable='true'>This is the Editor. write something here.</div>

具有动态链接标记的contenteditable元素（JS，jQuery）

1 个答案: