Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win


Showing rich text editor content in textarea box

Posted on 2004-11-01
Medium Priority
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
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3

Expert Comment

ID: 12462366

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...
LVL 16

Author Comment

ID: 12462716

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.


Accepted Solution

Tyzer earned 2000 total points
ID: 12462816
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

ID: 12463420
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

ID: 12464045
This does it:



Featured Post

Enroll in October's Free Course of the Month

Do you work with and analyze data? Enroll in October's Course of the Month for 7+ hours of SQL training, allowing you to quickly and efficiently store or retrieve data. It's free for Premium Members, Team Accounts, and Qualified Experts!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
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…

636 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