Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Senior Coder
    Join Date
    Jun 2008
    Location
    Cornwall
    Posts
    2,097
    Thanks
    297
    Thanked 12 Times in 12 Posts

    Exclamation is it possible to add a font formatting toolbar to a text box?

    Hi All,

    i am wondering if it is possible to add a text formatting "toolbar" to a textbox to allow users to format text in the textbox/area and then have it insert the styling into the db so that when displaying the content on a webpage all the styling will appear as it did when first formatted by the user?

    thanks
    Luke

  • #2
    Senior Coder
    Join Date
    Apr 2007
    Location
    Quakertown PA USA
    Posts
    1,028
    Thanks
    1
    Thanked 125 Times in 123 Posts
    You're looking for an RTE (Rich text editor).

    Check out tinymce or fckeditor
    John

  • #3
    Senior Coder
    Join Date
    Jun 2008
    Location
    Cornwall
    Posts
    2,097
    Thanks
    297
    Thanked 12 Times in 12 Posts
    hi mate, yup that was what i was looking for

    however im having some trouble getting it to display

    here is my code:
    Code:
    <div class="addnewscontainer">
      <form id="form1" name="form1" method="post" action="" onsubmit="return submitForm();">
      <script language="JavaScript" type="text/javascript">
    <!--
    function submitForm() {
    //make sure hidden and iframe values are in sync before submitting form
    updateRTE('rte1'); //use this when syncing only 1 rich text editor ("rtel" is name of editor)
    //updateRTEs(); //uncomment and call this line instead if there are multiple rich text editors inside the form
    alert("Submitted value: "+document.myform.rte1.value) //alert submitted value
    return true; //Set to false to disable form submission, for easy debugging.
    }
    
    //Usage: initRTE(imagesPath, includesPath, cssFile)
    initRTE("images/", "", "");
    //-->
    </script>
        <table width="600" border="0" cellspacing="1" cellpadding="3">
          <tr>
            <td>News Headline</td>
            <td>:</td>
            <td><input type="text" name="newsHeadline" id="newsHeadline" /></td>
          </tr>
          <tr>
            <td>News Description</td>
            <td>:</td>
            <td><script language="JavaScript" type="text/javascript">
    <!--
    //Usage: writeRichText(fieldname, html, width, height, buttons, readOnly)
    writeRichText('rte1', 'here&#39;s the "<em>preloaded</em> <b>content</b>"', 400, 200, true, false);
    //-->
    </script></td>
          </tr>
          <tr>
            <td>Photos</td>
            <td>:</td>
            <td>&nbsp;</td>
          </tr>
          <tr>
            <td>Videos</td>
            <td>:</td>
            <td>&nbsp;</td>
          </tr>
          <tr>
            <td>Date Of Event</td>
            <td>:</td>
            <td><input type="text" name="newsDate" id="newsDate" /></td>
          </tr>
        </table>
        </form>
    </div>
    and here is what it says to do:
    Code:
    Step 1: Insert the below script into the HEAD section of your page:
    
    <script language="JavaScript" type="text/javascript" src="richtext_compressed.js"></script>
    
    **Note: Alternatively, you can insert the below code instead to reference the original, non compressed version of the .js file instead. This file is significantly larger than the compressed version, though the source is human readable:
    
    <script language="JavaScript" type="text/javascript" src="richtext.js"></script>
    
    Step 2: Inside the zip file you downloaded, upload the files:
    
    1) The relevant .js file you have chosen above
    2) The sole .css file included in the zip file
    3) Palette.htm, blank.htm and insert_table.htm
    4) The entire images directory
    
    Upload the above to your web page directory, in the same directory where your form is in.
    
    Step 3: Inside your form where you wish the rich text editor to appear, add the below code:
    
    <script language="JavaScript" type="text/javascript">
    <!--
    //Usage: writeRichText(fieldname, html, width, height, buttons, readOnly)
    writeRichText('rte1', 'here&#39;s the "<em>preloaded</em> <b>content</b>"', 400, 200, true, false);
    //-->
    </script>
    
    As you can see, you can control the initial content and dimensions of the rich text editor. "rtel" is the name of the text editor, which can be arbitrary but should be unique.
    
    Step 4: Finally, just before the form containing the rich text editor is submitted, the script needs to sync the value contained within the editor to ensure it gets properly submitted. To archive this, a special function needs to be attached to the onSubmit event of your form. This is shown below:
    
    <form name="myform" onsubmit="return submitForm();">
    
    <script language="JavaScript" type="text/javascript">
    <!--
    function submitForm() {
    //make sure hidden and iframe values are in sync before submitting form
    updateRTE('rte1'); //use this when syncing only 1 rich text editor ("rtel" is name of editor)
    //updateRTEs(); //uncomment and call this line instead if there are multiple rich text editors inside the form
    alert("Submitted value: "+document.myform.rte1.value) //alert submitted value
    return true; //Set to false to disable form submission, for easy debugging.
    }
    
    //Usage: initRTE(imagesPath, includesPath, cssFile)
    initRTE("images/", "", "");
    //-->
    </script>
    
    <!-rest of your form-->
    "
    "
    </form>
    
    Don't be intimated by Step 3. Basically, just add the above script containing function submitForm() to your form, and attach it to the onsubmit event handler inside the form tag.
    im sure ive followed it corrctly but step 2 is probably where ive gone wrong?

    thanks
    Luke


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •