javascript - 在 ContentEditable Div 中创建链接

Question

我正在开发一个简单的富文本编辑器，我想知道是否可以在 div 内创建链接。为了清楚起见，让我们看一个示例场景:

用户想要在博客上发帖，然后他从 url 复制一个链接，然后将其粘贴到 ContentEditable div 中，并且程序必须将复制的文本复制到 link 中。然后当他点击POST按钮时，程序必须从html中获取ContentEditable div代码(例如:<a href="stackoverflow.com"> stackoverflow.com </a>)

到目前为止，我所拥有的就是这里的 HTML 代码:

<div contentEditable=true id = "discussionmessage"></div>
<button id = "post"> POST </button>

和Javascript代码在这里:

//alerts the text inside the ContentEditable div.
$("#post").click(function(){ 
    alert(document.getElementById("discussionmessage").innerHTML);     
});

这可能吗？

Answer 1

我的建议是要求用户输入简单的语法，例如...

“嗨。这是一个占位符。有关更多信息，请点击此处链接:www.example.com 该网站目前无法在移动设备上运行。更多假装文本请参见此处。”

然后您可以使用 javascript Regexp 提取以“link:”开头并以空格结尾的字符串(因为 Web url 不能有空格)。

类似这样的事情

 var text = $("discussionmessage").html();
    var Origlink = text.indexOf("link:");
    If(Origlink != -1) {
         var end = text.indexOf(" ",Origlink);
          Origlink = text.substring(Origlink+5,end);
         If (Origlink.search("http://") == -1){
         link = "http://" + link;
} else {
    link = Origlink;
}
         var newLink = "<a href='" + link + ">link</a>'";
         text = text.replace(Origlink,NewLink);
$("discussionmessage").html(text);
}

当然，这可能可以用一些 JQuery 来美化，但功能是相同的。

或者搜索字符串“www”。或“http”

希望对你有帮助