Looking for the script or a tutorial for adding html to textfield

[jdubwelch]

I'm making a lot of "admin" pages for websites i've been doing lately for clients to add their own news, etc.  I want to make it easier for them to add links, pictures, and format the text they are adding to the text field.

 

I've tried googling and searching sites for tutorials or scripts to do this but I've come up with nothing so far. 

 

I want to make something similar to what phpfreaks has here but way more basic.  Probably just with bold, italic, and add link for starters.

 

So what is this called?  What should I search for?  If you know of any tutorials, or scripts can you point me to them?

 

 

[phpQuestioner]

 

http://www.phpfreaks.com/forums/index.php/topic,171252.msg758382.html#msg758382

[nogray]

something like this will work

 

http://nicedit.com/

 

[jdubwelch]

phpQuestioner:

 

So you're script you wrote is great. How would I incorporate this code for adding a link to the script you wrote?

 

function addLink (id) {
var currentText = document.getElementById(id).value;
var newLink = prompt("Enter the link.", "http://");
var linkTitle = prompt("Enter the title of the link.", "");

var addText = currentText + " <a href=\"" + newLink + "\">" + linkTitle + "</a> ";

document.getElementById(id).value = addText;
document.getElementById(id).focus();
}

[phpQuestioner]

Not exactly sure what your trying to do by your script, but if you want links instead of buttons; just do it like this:

 

<a href="javascript://" onclick="surroundText('[b]', '[/b]', document.forms.postmodify.message); return false;">Bold</a>

[jdubwelch]

I want to create the link for them.  So, it alerts them to enter the title "click here", then prompts them for the link "http://www.whatever.com"... then it would add <a href="http://www.whatever.com">click here</a>  at the spot where the curser was and then the cursor would go to the end of that, so they could keep on typing.

[phpQuestioner]

Here you go; I changed the script, because I thought this version may work better for you particular needs.

 

<script language="javascript">

function surroundText(startTag,endTag)
{
document.getElementById('forumpost').value += startTag + endTag;
document.getElementById('forumpost').focus();
}

function grantpermission()
{
var urladdress = document.postmodify.webaddress.value.length;
var urltxt = document.postmodify.webaddresstxt.value.length;
if (urladdress != "0" && urltxt != "0") 
{
document.getElementById('linkadder').disabled = false;
}
else {
document.getElementById('linkadder').disabled = true;
}
}

window.onload=function() {
// Event Used To Ready IE For Caret Position Storage
document.postmodify.message.focus();
}

</script>

<form name="postmodify">
<textarea id="forumpost" name="message"style="width:500px;height:250px"></textarea>
<br><br>
Enter Link URL: <input type="text" name="webaddress" onkeyup="grantpermission()">
Enter Link Text: <input type="text" name="webaddresstxt" onkeyup="grantpermission()">
<input type="button" id="linkadder" onclick="var urladdress = document.postmodify.webaddress.value; var urltxt = document.postmodify.webaddresstxt.value; surroundText('<a href=\''+urladdress+'\'>', ''+urltxt+'</a>', document.forms.postmodify.message); return false;" value="Insert Link" disabled>
</form>

[phpQuestioner]

 

Actually Try This Version It Will Work Better

 

<script language="javascript">

// Replaces the currently selected text with the passed text.
function replaceText(text, textarea)
{
// Attempt to create a text range (IE).
if (typeof(textarea.caretPos) != "undefined" && textarea.createTextRange)
{
	var caretPos = textarea.caretPos;

	caretPos.text = caretPos.text.charAt(caretPos.text.length - 1) == ' ' ? text + ' ' : text;
	caretPos.select();
}
// Mozilla text range replace.
else if (typeof(textarea.selectionStart) != "undefined")
{
	var begin = textarea.value.substr(0, textarea.selectionStart);
	var end = textarea.value.substr(textarea.selectionEnd);
	var scrollPos = textarea.scrollTop;

	textarea.value = begin + text + end;

	if (textarea.setSelectionRange)
	{
		textarea.focus();
		textarea.setSelectionRange(begin.length + text.length, begin.length + text.length);
	}
	textarea.scrollTop = scrollPos;
}
// Just put it on the end.
else
{
	textarea.value += text;
	textarea.focus(textarea.value.length - 1);
}
}


// Remember the current position.
function storeCaret(text)
{
// Only bother if it will be useful.
if (typeof(text.createTextRange) != "undefined")
	text.caretPos = document.selection.createRange().duplicate();
}


// Surrounds the selected text with text1 and text2.
function surroundText(text1, text2, textarea)
{
// Can a text range be created?
if (typeof(textarea.caretPos) != "undefined" && textarea.createTextRange)
{
	var caretPos = textarea.caretPos, temp_length = caretPos.text.length;

	caretPos.text = caretPos.text.charAt(caretPos.text.length - 1) == ' ' ? text1 + caretPos.text + text2 + ' ' : text1 + caretPos.text + text2;

	if (temp_length == 0)
	{
		//caretPos.moveStart("character", -text2.length);
		//caretPos.moveEnd("character", -text2.length);
		//caretPos.select();
	}
	else
		textarea.focus(caretPos);
}
// Mozilla text range wrap.
else if (typeof(textarea.selectionStart) != "undefined")
{
	var begin = textarea.value.substr(0, textarea.selectionStart);
	var selection = textarea.value.substr(textarea.selectionStart, textarea.selectionEnd - textarea.selectionStart);
	var end = textarea.value.substr(textarea.selectionEnd);
	var newCursorPos = textarea.selectionStart;
	var scrollPos = textarea.scrollTop;

	textarea.value = begin + text1 + selection + text2 + end;

	textarea.scrollTop = scrollPos;
}
// Just put them on the end, then.
else
{
	textarea.value += text1 + text2;
	textarea.focus(textarea.value.length - 1);
}
}


function grantpermission()
{
var urladdress = document.postmodify.webaddress.value.length;
var urltxt = document.postmodify.webaddresstxt.value.length;
if (urladdress != "0" && urltxt != "0") 
{
document.getElementById('linkadder').disabled = false;
}
else {
document.getElementById('linkadder').disabled = true;
}
}


window.onload=function() {
// Event Used To Ready IE For Caret Position Storage
document.postmodify.message.focus();
}

</script>

<form name="postmodify">
<textarea id="forumpost" name="message"style="width:500px;height:250px" onselect="storeCaret(this);" onclick="storeCaret(this);" onkeyup="storeCaret(this);" onchange="storeCaret(this);" onfocus="storeCaret(this);" ></textarea>
<br><br>
Enter Link URL: <input type="text" name="webaddress" onkeyup="grantpermission()">
Enter Link Text: <input type="text" name="webaddresstxt" onkeyup="grantpermission()">
<input type="button" id="linkadder" onclick="var urladdress = document.postmodify.webaddress.value; var urltxt = document.postmodify.webaddresstxt.value; surroundText('<a href=\''+urladdress+'\'>', ''+urltxt+'</a>', document.forms.postmodify.message); return false;" value="Insert Link" disabled>
</form>