asked on

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

Andrew

Jens Fiederer

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_ANDREW

ASKER

sorry I am aware of all that but, how do programs online such as WYSIWYG achieve it? They have HTML rendered in the textbox.

SOLUTION

Jens Fiederer

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

REA_ANDREW

ASKER

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?

Andrew

REA_ANDREW

ASKER

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

alain34

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.

<html>
<script>
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;
            editorObject.open();
            editorObject.write(frameHtml);
            editorObject.close();
            if (!readOnly) editorObject.designMode = "On";
      }
}
</script>
<body>
<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)">
</body>
</html>

Jens Fiederer

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_ANDREW

ASKER

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.

ASKER CERTIFIED SOLUTION

alain34

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

REA_ANDREW

ASKER

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>
<script language="javascript" type="text/javascript">
tinyMCE.init({
      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"
});
</script>

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_ANDREW

ASKER

"sorry mate, but I take this code from conceptRTE at http://www.conceptuel.co.uk/conceptRTE
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.

alain34

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 Fiederer

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_ANDREW

ASKER

do not be sorry, I appreciate your input.

alain34

jensfiederer, the code is extracted from conceptRTE. http://www.conceptuel.co.uk/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!

UnexplainedWays

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_ANDREW

ASKER

jensfiederer

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

alain34

What is wrong zith the iframe method?
Why would it be better with a textarea?

Jens Fiederer

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_ANDREW

ASKER

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.

Andrew

REA_ANDREW

ASKER

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

alain34

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

jensfiederer

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.

UnexplainedWays

Then how does gmail do it?

REA_ANDREW

ASKER

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.

UnexplainedWays

What about the right click? It's exactly the same as a textarea.

REA_ANDREW

ASKER

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.

UnexplainedWays

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="http://mail.google.com/mail/?view=page&name=htmlcompose&ver=af0afdsg1c1af8" 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.