Simply Cast HTML TextArea to accept innerHTML

I might not have the Title of this question correct but, what I am aiming to understand is simply this.

I am aware you can download, and purchase Web Based WYSIWYG, but what I cannot understand is how these programmers first cast the object to allow for HTML insertion and Change.  i.e. do they make it so it allows the innerHTML command?

That is all I am wating to know, how to convert the object(which I assume they use a texarea) into an rich text box, ie. can accept HTML

Thanks in advance

LVL 20
Who is Participating?
alain34Connect With a Mentor Commented:
sorry mate, but I take this code from conceptRTE at
Therefore I'm sure it is Iframe!!!
may be you are going to tell me that conceptRTE is not a WYSIWYG editor!
Jens FiedererTest Developer/ValidatorCommented:
1) innerHTML is an attribute, not a "command".

2) any textbox can accept HTML, you don't have to do anything special with it.

if you have a textarea id=ta, and a div id=display, it is easy in a script to set

document.getElementById("display").innerHTML = document.getElementById("ta").value

and the DIV will display the HTML entered in the textarea.
REA_ANDREWAuthor Commented:
sorry I am aware of all that but, how do programs online such as WYSIWYG achieve it? They have HTML rendered in the textbox.
The 14th Annual Expert Award Winners

The results are in! Meet the top members of our 2017 Expert Awards. Congratulations to all who qualified!

Jens FiedererConnect With a Mentor Test Developer/ValidatorCommented:
"Rich text box" would be something entirely different, Microsoft oriented....that would display RTF text rather than HTML (i.e., some code would convert the RTF into HTML, since that is what is supported by the browser....or if it is an ActiveX object, it might convert the RFT into graphic output directly).
REA_ANDREWAuthor Commented:
So in theory I want to be able to achieve this

document.getElementById("ta").innerHTML = "<b>Bold</b>";

and the value of the textarea, is Bold

It obviously can be done, as it has, but how is my question?  I realise that it may be the case that this would involve a lot of programming, so if that is the case, does anyone know of a tutorial for creating A WYSIWYG?

REA_ANDREWAuthor Commented:
well they have achieved it with pure javascript, hence my area of choice for this post. All that is needed to render this Rich Text Box is Javascript.  I could not see the inclusion of a call to an ActiveX scripting object
Actually, it is an ifram used!
Try the following. It is just for IE but it could give you a good idea. It is a tad more complicated for Firefox but it is following the same principle.

function enableDesignMode(editorId, html, readOnly) {
        var ua = navigator.userAgent.toLowerCase();
      isGecko = (ua.indexOf("gecko") != -1);
      var frameHtml = "<html id=\"" + editorId + "\">\n";
      frameHtml += "<head>\n";
      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>";

      if (document.all) {
            var editorObject = frames[editorId].document;
            if (!readOnly) editorObject.designMode = "On";
<textarea id='source' cols=40 rows=25><b>This is bold</b><br/><u>This is underlined</u><h1>Pollux</h1></textarea>
<iframe id='editor' name='editor' width='400px' height='400px'></iframe>
<br />
<input type='button' value='take data from textarea and inject in editor' onclick="enableDesignMode('editor',document.getElementById('source').value, false)">
Jens FiedererTest Developer/ValidatorCommented:
OK - didn't know you were talking about an actual product, since WYSIWYG is also a term for "What you see is what you get" editing.

Haven't used that one...if somebody here is familiar with that specific program and its implementation, maybe you can enlighten REA.

If nobody responds, I'll be happy to take a look at it sometime...(without having seen it, my guess would be that it only looks like a textarea....but if it is displaying on your browser, you can do a "View->Source" (under IE, other browsers would have something similar) to see how it is implemented....if you see an "<OBJECT .... " in there where you think your "textarea" is, that would be an applet that provides the APPEARANCE of a textarea.
REA_ANDREWAuthor Commented:
no no no, lol, I am referring to the term WYSIWYG. ok....

I have downloaded a few products, and all of them require that your page has a textarea, thats it, no iframe or anything.

REA_ANDREWAuthor Commented:
ok, it is rendered like this

in the head I call these two scripts

<script language="javascript" type="text/javascript" src="../includes/tiny_mce/tiny_mce.js">
<script language="javascript" type="text/javascript">
      mode : "textareas",
      theme : "advanced",
      plugins : "table,save,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,zoom,flash,searchreplace,print,contextmenu",
      theme_advanced_buttons1_add_before : "save,separator",
      theme_advanced_buttons1_add : "fontselect,fontsizeselect",
      theme_advanced_buttons2_add : "separator,insertdate,inserttime,preview,zoom,separator,forecolor,backcolor",
      theme_advanced_buttons2_add_before: "cut,copy,paste,separator,search,replace,separator",
      theme_advanced_buttons3_add_before : "tablecontrols,separator",
      theme_advanced_buttons3_add : "emotions,iespell,flash,advhr,separator,print",
      theme_advanced_toolbar_location : "top",
      theme_advanced_toolbar_align : "left",
      theme_advanced_path_location : "bottom",
      plugin_insertdate_dateFormat : "%Y-%m-%d",
      plugin_insertdate_timeFormat : "%H:%M:%S",
      extended_valid_elements : "a[name|href|target|title|onclick],img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name],hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style]",
      external_link_list_url : "example_data/example_link_list.js",
      external_image_list_url : "example_data/example_image_list.js",
      flash_external_list_url : "example_data/example_flash_list.js"

And in the body I have this, simply a text area

<textarea name="content" cols="85" rows="21">Enter your description here</textarea>

no Objects at all in the body.
REA_ANDREWAuthor Commented:
"sorry mate, but I take this code from conceptRTE at
Therefore I'm sure it is Iframe!!!"

ok well with my last post I can assure you of this:

1 implementation may involve an iframe.

Another implementation can only require a textarea, as above.
conclusion, each WYSIWYG may use different option!
There is more than one solution out there!
I was just trying to give you an easy example that you can run standalone.
Sorry to make the effort!
Jens FiedererTest Developer/ValidatorCommented:
Alain provides an example where an IFRAME is used to provide the display of a formatted textarea (and one textarea is used to enter the codes).

Textareas hold text, there is no innerHTML.  Anyplace you see a "textarea" that contains fancy stuff, it is just something that LOOKS like a textarea.  Without a specific example, it is not so easy to say!
REA_ANDREWAuthor Commented:
do not be sorry, I appreciate your input.
jensfiederer, the code is extracted from conceptRTE.
It is a WYSIWYG editor.
The textarea was just the input process to the iframe. The iframe is used by conceptRTE.
I try to make it simple but I may have confused people!
I've noticed that gmail is a text area and it sup[orts bullets, bold etc.  I'm yet to see how it's done but when i find out i'll be making one.
REA_ANDREWAuthor Commented:

That was my opinion in theory, until I saw that a Textarea did hold HTML in the scripts that I use on numerous sites. I can not understand how they have done it thats all, because I can see it happening
What is wrong zith the iframe method?
Why would it be better with a textarea?
Jens FiedererTest Developer/ValidatorCommented:
Looking at tiny_mce, it looks to me like they do NOT use a textbox for their display - they generate a new window (contained in an "editor instance") and set up the display in that.

It's kind of a huge product, so it is hard to be sure exactly what is happening without some pretty heavy analysis...anyway there is a lot of
     inst.contentWindow.focus() etc. in that code.
REA_ANDREWAuthor Commented:
I am not saying there is anything wrong with an iframe, only I know how to do that. What I do not know is how to do it with a single TextArea.  

REA_ANDREWAuthor Commented:
I withdraw my statement about the textarea. I have also read myself how this little trick is first spawned.    


I apologise for doubting your theory, which you had researched.


I apologise for dismissing your views without careful consideration.

To conclude though, the trick is first spawned by including in the iframe.

"contentEditable" attribute set to true

Again thank you for all your input, and the ideas that were thrown to me because ultimately you both have solved my query, of "How is it done."  

POINTS split equally between alain34 & jensfiederer

oh and I also retract my other statement

"I am not saying there is anything wrong with an iframe, only I know how to do that"

I quite clearly DO NOT KNOW HOW TO DO THAT, well I do know lol.

Thanks Again.

Then how does gmail do it?
REA_ANDREWAuthor Commented:
they probably replace the textarea, with an iframe at runtime with javascript. this means that when you view the source you see the textarea, but you do not see the iframe in the source.

What about the right click?  It's exactly the same as a textarea.
REA_ANDREWAuthor Commented:
then I would love to know, but again, I feel I am in a loop, lol. I wonder how they achieved this.  Would require another question, but how ever they did it, I am sure they will not want to share it.
I thought i was on to something, i found there source and it was this:

<textarea id="to_compose" style="width: 100%;" tabindex="1" rows="2" wrap="soft" name="to" onbeforedeactivate="top.js._CM_OnBeforeDeactivateTextBox(window,this)"></textarea>

But thats just for there To email addies, the real box is this:

<iframe id="hc_compose" name="v2_hc_compose" src="" onload="top.js._HC_OnLoad(this)" class="ef" style="border: 2px inset rgb(255, 255, 255); background: white none repeat scroll 0%; clear: right; -moz-background-clip: initial; -moz-background-origin: initial; -moz-background-inline-policy: initial; height: 100%; -moz-user-select: none;" unselectable="on" frameborder="0"></iframe>

Mozila doesn't have the same right click as IE, weird.
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.

All Courses

From novice to tech pro — start learning today.