Solved

how do i create buttons to format text entered into my text area

Posted on 2008-10-22
6
306 Views
Last Modified: 2012-05-05
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>&nbsp;(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>&nbsp;(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>

Open in new window

0
Comment
Question by:sadaf_syed
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
6 Comments
 
LVL 82

Accepted Solution

by:
hielo earned 500 total points
ID: 22781629
>>text area
the data within a textarea displays only "raw" text. The editors that you typically see online make use of a div(or some other element) to display the styled text. My suggestion to you is to you an HTML editor like
TinyMCE:http://tinymce.moxiecode.com/
 or

FCKEditor :http://www.fckeditor.net/

and integrate it into your project.
0
 
LVL 7

Expert Comment

by:alexpercsi
ID: 22781656
There is a lot of coding invloved in creating these features. I would recommend going for some pre-existing controls. Just google "javascript rich text box".

Among the results, this tutorial looks promising:

http://www.webreference.com/programming/javascript/gr/column11/

I hope this helps.

Best Regards,
Alex Percsi
0
 
LVL 1

Expert Comment

by:smilyjf
ID: 22781791
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/
0
Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

 
LVL 44

Expert Comment

by:scrathcyboy
ID: 22782323
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.
0
 

Author Comment

by:sadaf_syed
ID: 22788568
i have gone with fckeditor as it is configurable with the foundeo spell checker. thank you.
0
 
LVL 82

Expert Comment

by:hielo
ID: 22789541
you are welcome. Glad to help.
0

Featured Post

Transaction Monitoring Vs. Real User Monitoring

Synthetic Transaction Monitoring Vs. Real User Monitoring: When To Use Each Approach? In this article, we will discuss two major monitoring approaches: Synthetic Transaction and Real User Monitoring.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…

691 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question