Showing rich text editor content in textarea box

Posted on 2004-11-01
Last Modified: 2007-12-19

I use the following code as an HTML rich text editor.

I would like for the following to display the contents of the code being edited in realtime in a textarea box below.

How can this be done?


<script language="JavaScript" type="text/javascript" src="rte/rte.js"></script>
<form action="/developing/smartedit/edit/index.php" method="POST" name="rteUPDATE" onsubmit="return submitForm();">
<table border=0 cellpadding=0 cellspacing=0>
<tr><td align=center>

<script language="JavaScript" type="text/javascript">
function submitForm() {
      //change the following line to true to submit form
      return true;
initRTE("editor/images/", "editor/", "style.css");
<noscript><p><b>Javascript must be enabled to use this form.</b></p></noscript>

<script language="JavaScript" type="text/javascript">
var pagecontent = "";
//Usage: writeRichText(fieldname, html, width, height, buttons)
writeRichText('com', pagecontent, 740, 450, true, false);

document.write('<textarea>I want the content from above to go here'</textarea>);

Question by:hankknight
    LVL 2

    Expert Comment


    Are you trying to build your own WYSIWYG textarea?
    You can download a FREE rich textarea editor from: (info and download etc...) (see example)

    very nice tool and it's easy to integrate...
    LVL 16

    Author Comment


    No, I'm not trying to build my own, I am using one already.

    I just want everything in the rich text box to also instantly be displayed below in a textarea box.

    LVL 3

    Accepted Solution

    i'm not really sure, but , 'com' , is the id of the richtexteditor ur using ?
    you should also give ur textarea an id, so you can find it, to put something in it !

    if you add the following code at the bottom of your page:

    document.getElementById('com').attachEvent('onkeyup', fnMySyncFunction)
    // this adds an event to the richtexteditbox..

    //here is the function that was added as an event to the richtexteditbox
    function fnMySyncFunction(){
          document.getElementById('yourtextareaID').value = document.getElementById('com').value

    Good luck m8!
    LVL 16

    Author Comment

    Looks good but it didn't work.

    The text is in a frame that is created this way:

        document.writeln('<iframe id="' + rte + '" name="' + rte + '" width="' + width + 'px" height="' + height + 'px"></iframe>');

    The content is added this way:

    function enableDesignMode(rte, html, readOnly) {
          var frameHtml = "<html id=\"" + rte + "\">\n";
          frameHtml += "<head>\n";
          //to reference your stylesheet, set href property below to your stylesheet path and uncomment
          if (cssFile.length > 0) {
                frameHtml += "<link media=\"all\" type=\"text/css\" href=\"" + cssFile + "\" rel=\"stylesheet\">\n";
          } else {
                frameHtml += "<style>\n";
                frameHtml += "body {\n";
                frameHtml += "      background: #FFFFFF;\n";
                frameHtml += "      margin: 0px;\n";
                frameHtml += "      padding: 0px;\n";
                frameHtml += "}\n";
                frameHtml += "</style>\n";
          frameHtml += "</head>\n";
          frameHtml += "<body>\n";
          frameHtml += html + "\n";
          frameHtml += "</body>\n";
          frameHtml += "</html>";

    and the text area box is created this way:

                document.writeln('<textarea name="' + rte + '" id="' + rte + '" style="width: ' + width + 'px; height: ' + height + 'px;">' + html + '</textarea>');

    Any thoughts?
    LVL 16

    Author Comment

    This does it:



    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone. Privacy Policy Terms of Use

    Featured Post

    How to run any project with ease

    Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
    - Combine task lists, docs, spreadsheets, and chat in one
    - View and edit from mobile/offline
    - Cut down on emails

    No!  Not that kind of date. :-)  That wasn't meant to be a pick up line. This article is about displaying dates in different formats regardless of the browser being used.  If you let the browser's JavaScript engine format a date object for you, t…
    Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
    The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
    The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

    875 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

    12 Experts available now in Live!

    Get 1:1 Help Now