Showing rich text editor content in textarea box


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>);

LVL 16
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.


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...
hankknightAuthor Commented:

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.

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!

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
hankknightAuthor Commented:
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?
hankknightAuthor Commented:
This does it:


It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.