PDA

Click to See Complete Forum and Search --> : specifying font changes in text box

JulesTanner
05-19-2003, 01:10 PM
How do you create a toolbar with bold, italic, underline, and font color so that a user can edit the font in a text box? I am wanting something very similar to the font toolbar that is posted on the "post new thread" webpage.

Thanks!
khalidali63
05-19-2003, 01:16 PM
Do a search in the forum,with pyro's name he had a link up some time ago with a text editor with the same items.
JulesTanner
05-19-2003, 01:27 PM
Thanks!
JulesTanner
05-19-2003, 03:19 PM
This is what I found from Pyro's help previously. The only problem is that the submit button doesn't work. If I take out the onsubmit command in the form tag, the text is added, but display's in the format "This is a <b>test</b> instead of actually bolding the text. Your help is greatly appreciated.

<script language="JavaScript" type="text/javascript">
function storeCaret(obj){
if (obj.createTextRange){
obj.selection =
document.selection.createRange ).duplicate();
}
return true;
}

function insertAtCaret(objTxt, beg, end, txt) {
var str = (objTxt.createTextRange && objTxt.selection) ? objTxt.selection.text : "";
str = formatString(objTxt, str, beg, end, txt);
if (str == null) return true;
if (objTxt.createTextRange && objTxt.selection) {
var objTxtRange = objTxt.selection;
objTxtRange.text = (objTxtRange.text.charAt (objTxtRange.text.length - 1) == ' ') ? str + ' ' : str;
objTxt.selection = null;
}
else {
objTxt.value += str;
}
return true;
}

function formatString(arg, inp, beg, end, txt) {
var str = prompt("Enter text to be *"+txt+"*", inp);
if (arg.createTextRange && arg.selection) {
if (str != null) {
str = (arg.selection.text.charAt (arg.selection.text.length - 1) == ' ') ? str.replace(/\s+$/,"") : str;
str = beg + str + end;
}
else {
arg.selection = null;
}
}
else {
if (str != null) {
str = beg + str + end;
}
}
return str;
}
</script>

</head>


<CFIF not ISDEFINED("FORM.choice")>

<CFSET TEMPDATASOURCE = "studies">
<CFQUERY NAME="GetAction" DATASOURCE="#TEMPDATASOURCE#">
SELECT * FROM tRules
</CFQUERY>

<form name="edit" action="AddRule.cfm" onsubmit="return false;" method="post">

<body>
<table border="0" cellpadding="2">
<tr><td>
<input type="button" value="B" class="smBtn"
onClick="return insertAtCaret(this.form.content, '', '', 'bold');">
</td>
<td rowspan="3">
<b>Rule:</b><br><textarea name="content" cols="100" rows="10" onSelect="return storeCaret(this);" onClick="return storeCaret(this);" onKeyup="return storeCaret(this);"></textarea>
</td></tr>
<tr><td>
<input type="button" value="I" class="smBtn" onClick="return insertAtCaret(this.form.content, '', '', 'italic');">
</td></tr>
<tr><td>
<input type="button" value="U" class="smBtn" onClick="return insertAtCaret(this.form.content, '', '', 'underline');">
</td></tr>
</table>

<cfoutput>
<INPUT TYPE="HIDDEN" NAME = "choice" VALUE = "done">
</cfoutput>

<input type="submit" value="&nbsp;&nbsp;&nbsp;Save&nbsp;&nbsp;&nbsp;">

</form>

<cfelse>

<CFQUERY NAME="updatesp" DATASOURCE="studies">
exec AddRule
@Rules = '#content#'
</cfquery>

</cfif>