Add Link to Selected Text in Textarea

I recently received a request to modify one of our intranet applications so that users would have any easy way of inserting links into a textarea. Due to how we use the data in the text area I didn't want to implement a full WYSIWYG editor, so I had to come up with another solution.

The users that will be adding links are power users, but they understandably didn't want to insert the links manually. They also wanted to select from a list of links that are defined in a different part of the application. So, I just added a little bit of code that shows a select box with all the possible links when text is selected in the textarea. When the users selects a link option, the textarea is updated to contain the HTML code necessary to display a link that opens in a new window.

Below is the code that I use to get the selection and insert the link. It is somewhat crude, yet effective.

src="jquery-1.3.2.min.js"></script>

$(document).ready(function(){

/**

* Gets the start and end position for the selection

* @param {string} pSelectArea The texatarea

* to get the selection from (jQuery selector)

* @return An object with the parameters start and end

* @type object

function getSelectionRange(pSelectArea){

// if we are in IE

if(document.selection){

var tBookmark =

document.selection.createRange().getBookmark();

var tSelection =

$(pSelectArea).get(0).createTextRange();

tSelection.moveToBookmark(tBookmark);

var tBefore =

$(pSelectArea).get(0).createTextRange();

tBefore.collapse(true);

tBefore.setEndPoint("EndToStart", tSelection);

var tBeforeLength = tBefore.text.length;

var tSelectionLength = tSelection.text.length;

tSelectStart = tBeforeLength;

tSelectEnd = tBeforeLength + tSelectionLength;

}else{

tSelectStart = $(pSelectArea).get(0).selectionStart;

tSelectEnd = $(pSelectArea).get(0).selectionEnd;

}

return {start: tSelectStart, end: tSelectEnd};

}

/**

* Inserts a link into text between a start and end point

* @param {string} pText The text to insert the link into

* @param {string} pLink The link to insert

* @param {integer} pStart The starting location

* @param {integer} pEnd The ending location

* @return The new text with the link

* @type string

function insertLink(pText, pLink, pStart, pEnd){

tText01 = pText.substr(0, pStart);

tText02 = "<a target='_blank' href='" + pLink + "'>";

tText03 = pText.substr(pStart, pEnd-pStart);

tText04 = "</a>";

tText05 = pText.substr(pEnd);

return tText01 + tText02 + tText03 + tText04 + tText05;

}

var selection = {start:0,end:0};

// when a selection is made grab the

// range and show the link select

$("#MY_TEXTAREA").select(function(){

selection = getSelectionRange("#MY_TEXTAREA");

$("#MY_SELECT").fadeIn(1000);

});

// when the select changes add the link

$("#MY_SELECT").change(function(){

if(selection.end>selection.start){

var tNewText = insertLink(

$("#MY_TEXTAREA").val(),

$(this).get(0).value,

selection.start, selection.end);

$("#MY_TEXTAREA").val(tNewText);

}

});

</script>

Comments (newest first)

Alisa

I like the easy way of inserting links that you made. You can also make something like a button. Anyway, great piece of code!

yainbowl

Click on the New Text Area button on the toolbar, text_new_text_area_button.png.
You can also select Insert > New Text Area from the menu.