• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 2811
  • Last Modified:

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

  • 3
1 Solution

Are you trying to build your own WYSIWYG textarea?
You can download a FREE rich textarea editor from:

http://www.dynarch.com/projects/htmlarea/ (info and download etc...)

http://www.interactivetools.com/staff/ben/htmlarea3_demo/example.html (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!
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:



Featured Post

The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now