Solved

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

Posted on 2008-10-22
6
272 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
6 Comments
 
LVL 82

Accepted Solution

by:
hielo earned 500 total points
Comment Utility
>>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
Comment Utility
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
Comment Utility
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
Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 44

Expert Comment

by:scrathcyboy
Comment Utility
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
Comment Utility
i have gone with fckeditor as it is configurable with the foundeo spell checker. thank you.
0
 
LVL 82

Expert Comment

by:hielo
Comment Utility
you are welcome. Glad to help.
0

Featured Post

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

Someone recently asked me about how to display a progress indicator on a page while an iframe is loading. And I remember when I first came across this myself. It was a bit tricky to get my head around, but really, it's very simple. The most impor…
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

772 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

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now