sadaf_syed
asked on
how do i create buttons to format text entered into my text area
i want to add buttons like bold, italic, underline, font size, font color, to my text area how do i do that.I am attaching my form below. please help.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<%@ include file="/header.jsp" %>
<%@ page import = "com.synfoserv.beans.*" %>
<%@ page import = "java.util.*" %>
<jsp:useBean id="listing" class="java.util.ArrayList" scope="request"></jsp:useBean>
<title><database:label controlname="header_emailedit"/></title>
<script language="JavaScript" src="/crm/spellchecker-jsp/spellchecker/spell.js" type="text/javascript"></script>
</head>
<body>
</head>
<body class=stdbody>
<script>
parent.menu.setSubmit();
</script>
<%
//if cmd is to insert a record -> change the command to insert
String sCmd = (String) request.getAttribute ("cmd");
if (sCmd==null) sCmd=request.getParameter ("cmd");
if (sCmd.endsWith ("contextedit") ){
sCmd = sCmd.substring (0,sCmd.length()-11)+"save";
} else if (sCmd.endsWith ("edit")){
sCmd = sCmd.substring (0,sCmd.length()-4)+"save";
} else if (sCmd.endsWith ("insert")) {
sCmd = sCmd + "save";
}
UserBean uBean = (UserBean) session.getAttribute("userbean");
request.setAttribute("browser",uBean.getBrowser());
System.out.println("broswer.value :" + uBean.getBrowser());
%>
<script LANGUAGE="JavaScript1.2">
function removeAttachment(){
document.dataentry.filelist.remove(document.dataentry.filelist.selectedIndex);
}
function addFile(sFile){
var option = document.createElement("OPTION");
option.text = sFile;
option.value = sFile;
if(document.dataentry.browser.value == "MZ" || document.dataentry.browser.value == "IE"){
document.dataentry.filelist.add(option);
}else{
document.dataentry.filelist.add(option,null);
}
document.dataentry.fileselector.value="";
document.dataentry.fileselector.text="";
}
function addFiles(fl){
var newOpt1 = new Option(document.dataentry.file2upload.value, document.dataentry.file2upload.value);
fl.options[fl.length] = newOpt1;
document.dataentry.file2upload.value = "";
updateList(fl);
}
function removeFiles(fl){
var selItem = fl.selectedIndex;
fl.options[selItem] = null;
updateList(fl)
}
function updateList(fl){
var i;
document.dataentry.filelist.value = "";
for (i = 0; i < fl.length; i++){
document.dataentry.filelist.value = document.dataentry.filelist.value + fl.options[i].value + ";";
}
}
<!--
function validate(cmd)
{
var i = 0;
if ((document.dataentry.emailto.value=="")||
(document.dataentry.emailfrom.value=="") ||
(document.dataentry.emailsubject.value=="")) {
alert ("You must fill in all of the required fields!")
return false;
} else {
setCmd(cmd);
}
}
//-->
</script>
<form name=dataentry action="Controller?cmd=email_insertsave" ENCTYPE="multipart/form-data" onSubmit="return validate('<%=sCmd%>');" method="post" onClick="highlight(event)" onKeyPress="highlight(event)">
<input type="hidden" name="action" value="<%=request.getAttribute("action")%>">
<input type="hidden" name="cmd" value="">
<input type="hidden" name="browser" value="<%=request.getAttribute("browser")%>">
<TABLE width="100%" cellpadding="0" cellspacing="1">
<TR>
<TD class=headerow colSpan=4>
<TABLE width="100%" cellpadding="0" cellspacing="0">
<TR>
<TD class=headerow colspan="2">
<database:label controlname="header_emailedit"/>
</TD>
<TD align="right">
<database:nav controlname="button_send" modulename="CALL"
isbutton="y" security="CHANGE" buttontype="submit"/>
<database:nav controlname="button_cancel" modulename="CALL"
isbutton="y" security="CHANGE" buttontype="reset"/>
</TD>
</TR>
</TABLE>
</TD>
</TR>
<%
Iterator iter = listing.iterator();
boolean isHighlighed = false;
iter.hasNext();
CallListBean clbObj = (CallListBean) iter.next();
%>
<input type="hidden" name="companyid" value="<%=clbObj.getCompanyId()%>">
<input type="hidden" name="divisionid" value="<%=clbObj.getDivisionId()%>">
<input type="hidden" name="personid" value="<%=clbObj.getPersonId()%>">
<input type="hidden" name="callid" value="<%=clbObj.getCallId()%>">
<input type="hidden" name="assignto" value="<%=clbObj.getAssignTo()%>">
<input type="hidden" name="activitytype" value="<%=clbObj.getActivityType()%>">
<input type="hidden" name="regarding" value="<%=clbObj.getRegarding()%>">
<input type="hidden" name="status" value="<%=clbObj.getStatus()%>">
<input type="hidden" name="duedate" value="<%=clbObj.getDueDate()%>">
<input type="hidden" name="duetime" value="<%=clbObj.getDueTime()%>">
<input type="hidden" name="emailto" value="<%=request.getAttribute("emailto")%>">
<input type="hidden" name="emailfrom" value="<%=request.getAttribute("emailfrom")%>">
<input type="hidden" name="from" value="<%=request.getAttribute("from")%>">
<input type="hidden" name="to" value="<%=request.getAttribute("to")%>">
<input type="hidden" name="bcc" value="<%=request.getAttribute("to")%>">
<TR>
<TD class=labelcolumn><database:label controlname="email_to"/></TD>
<TD class=textcolumn ><%=request.getAttribute("to")%></TD>
<TD class=labelcolumn><database:label controlname="email_from"/></TD>
<TD class=textcolumn><%=request.getAttribute("from")%></TD>
</TR>
<TR>
<TD class=labelcolumn></TD>
<TD class=textcolumn ><%=request.getAttribute("emailto")%></TD>
<TD class=labelcolumn></TD>
<TD class=textcolumn><%=request.getAttribute("emailfrom")%></TD>
</TR>
<TR>
<TD class=labelcolumn colspan='1'>CC:</TD>
<TD class=textcolumn colspan='3'>
<INPUT name='cclist' value='' style="WIDTH: 400px;" class="textbox"></INPUT>
<LABEL> (Use semi-colon as address delimiter)</LABEL>
</TD>
</TR>
<TR>
<TD class=labelcolumn colspan='1'>BCC:</TD>
<TD class=textcolumn colspan='3'>
<INPUT name='bcclist' value='<%=request.getAttribute("bcc")%>'
style="WIDTH: 400px;" class="textbox"></INPUT>
<LABEL> (Use semi-colon as address delimiter)</LABEL>
</TD>
</TR>
<TR>
<TD class=labelcolumn colspan=1><database:label controlname="email_subject"/></TD>
<TD class=textcolumn colspan=3>
<INPUT name="emailsubject" class="required" style="WIDTH: 100%;"
value="<%=clbObj.getSummary()%>"></INPUT>
<div class=error><%=request.getAttribute("emailsubject_error")%></div>
</TD>
</TR>
<TR></TR>
<TR>
<TD class=labelcolumn colspan="2"><database:label controlname="email_body"/></TD>
<TD colspan="2" class=textcolumn></TD>
</TR>
<TR>
<TD class=textcolumn colSpan=4>
<TEXTAREA name="emailbody" class=required
style="WIDTH: 100%; HEIGHT: 200px"><%=clbObj.getNote()%></TEXTAREA>
<div class=error><%=request.getAttribute("emailbody_error")%></div>
<input type="button" value="Check Spelling" onClick="spell('document.dataentry.emailbody.value');" />
</TD>
</TR>
<TR>
<TD class=labelcolumn colspan='4'>File Attachment: (attachment is placed in the documents area)</TD>
</TR>
<TR>
<TD class=labelcolumn colspan='1'>Attach:</TD>
<TD class=textcolumn colspan='3' align='left'>
<INPUT type='FILE' name='file2upload' size='50' maxlength='255'></INPUT>
<INPUT type='button' value='Add' name='fileadd' onclick='addFiles(this.form.uploadlist);'></INPUT>
</TD>
</TR>
<TR>
<TD colspan='1' align='left'>File List:</TD>
<TD colspan='3' align='left'>
<SELECT name='uploadlist' style='WIDTH: 400px' size='10'></SELECT>
<INPUT type='hidden' name='filelist'></INPUT>
<INPUT type='button' value='Remove' name='fileremove' onclick='removeFiles(this.form.uploadlist);'></INPUT>
</TD>
</TR>
<TR>
<TD class=labelcolumn style='HEIGHT: 10px;'></TD>
<TD class=labelcolumn style='HEIGHT: 10px;'></TD>
<TD class=labelcolumn style='HEIGHT: 10px;'></TD>
<TD class=labelcolumn style='HEIGHT: 10px;'></TD>
</TR>
<TR>
<TD class=labelcolumn><database:label controlname="create_date"/></TD>
<TD class=textcolumn ><%=clbObj.getCreateDate()%></TD>
<TD class=labelcolumn><database:label controlname="create_user"/></TD>
<TD class=textcolumn ><%=clbObj.getCreateUser()%></TD>
</TR>
<TR>
<TD class=labelcolumn><database:label controlname="modify_date"/></TD>
<TD class=textcolumn ><%=clbObj.getModifyDate()%></TD>
<TD class=labelcolumn><database:label controlname="modify_user"/></TD>
<TD class=textcolumn ><%=clbObj.getModifyUser()%></TD>
</TR>
<TR>
<TD class=headerow colSpan=4>
<TABLE width="100%" cellpadding="0" cellspacing="0">
<TR>
<TD class=headerow colspan="2">
<database:label controlname="header_emailedit"/>
</TD>
<TD align="right">
<database:nav controlname="button_send" modulename="CALL"
isbutton="y" security="CHANGE" buttontype="submit"/>
<database:nav controlname="button_cancel" modulename="CALL"
isbutton="y" security="CHANGE" buttontype="reset"/>
</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
</form>
<script>document.dataentry.emailsubject.focus();</script>
</body>
</html>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
To add to Heilo's comment, having tried both tinyMCE and FCKEditor I would highly recommend TinyMCE.
They do tend to be a bit heavy however so if you're after something simple however maybe even try PunyMCE which is a lightweight 16kb version on TinyMCE:
http://www.moxieforge.net/overview.php?project_id=9&category_id=5
Full featured example: http://www.moxieforge.net/examples/punymce/examples/
They do tend to be a bit heavy however so if you're after something simple however maybe even try PunyMCE which is a lightweight 16kb version on TinyMCE:
http://www.moxieforge.net/overview.php?project_id=9&category_id=5
Full featured example: http://www.moxieforge.net/examples/punymce/examples/
The standard HTML text area has NO formatting allowed. But Rich text area does allow anything you want
www.textarearich.com/
www.dynamicdrive.com/dynamicindex16/richtexteditor/index.htm
www.tcpiq.com/tcpIQ/HTMLRichTextArea/
www.brothersoft.com/html-rich-text-area-19961.html
That is the simplest quickest solution, requiring no editors.
www.textarearich.com/
www.dynamicdrive.com/dynamicindex16/richtexteditor/index.htm
www.tcpiq.com/tcpIQ/HTMLRichTextArea/
www.brothersoft.com/html-rich-text-area-19961.html
That is the simplest quickest solution, requiring no editors.
ASKER
i have gone with fckeditor as it is configurable with the foundeo spell checker. thank you.
you are welcome. Glad to help.
Among the results, this tutorial looks promising:
http://www.webreference.com/programming/javascript/gr/column11/
I hope this helps.
Best Regards,
Alex Percsi