Making a link inside a ContentEditable Div

Question

I am developing a simple rich text editor and I want to know if it could be possible to make a link inside a div. For it to be clear, let's have a sample scenario:

The user wanted to post on a blog, he then copies a link from the url and then paste it inside a ContentEditable div and the program must make the copied text to a link. Then when he clicks POST button, the program must get the html code from the ContentEditable div (for example: <a href="stackoverflow.com"> stackoverflow.com </a>)

So far what I have is this HTML code here:

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

and Javascript code here:

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

Is it possible?

Security considerations aside, have you tried adding a new `` element to the page and setting the `href` property to be the url in your `
`? — Tro, Sep 09 '15 at 13:39

score 0 · Answer 1 · answered Sep 09 '15 at 13:42

0

From want I know you can do something like this, using jQuery:

$("#post").click(function(){ 
    var link = $("#discussionmessage").html();
    $("#discussionmessage").html("<a href="+link+">"+link+"</a>");
});

That way you added an anchor tag to the selected div, with the copied link..

If you only want to get the link and add an anchor tag in your JS, then simply:

$("#post").click(function(){ 
    var link = ("<a href="+$("#discussionmessage").html()+">"+$("#discussionmessage").html()+"</a>";

});

Hope it helps.. ^^

answered Sep 09 '15 at 13:42

Bla...

7,228
7
27
46

Thanks for the response, but what if the user inputs some text other than that link? As I've seen in your code you're getting all the text inside the div and turn it into a link after clicking post. – Makudex Sep 09 '15 at 13:53
Input sanitisation is not in the question, and is a lot more complex. – Tro Sep 09 '15 at 13:56
That's why i'm asking for help :( – Makudex Sep 09 '15 at 14:26
For that issue you can check this: http://stackoverflow.com/questions/1500260/detect-urls-in-text-with-javascript – Bla... Sep 09 '15 at 14:49

score 0 · Accepted Answer · answered Sep 09 '15 at 23:19

My suggestion would be to require the user to type a simple syntax like...

"Hi. This is a placeholder. For more info click here link:www.example.com the site doesn't work on mobile currently. More pretend text here."

Then you can use javascript Regexp to extract a string starting with "link:" and ending with a space(since web urls cannot have a space).

Something like this

 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);
}

Of course this can probably be prettied up with some JQuery but the functionality is the same.

Or do a search fr the string "www." Or "http"

Hope it helps

Making a link inside a ContentEditable Div

2 Answers2