Solved

Simply Cast HTML TextArea to accept innerHTML

Posted on 2006-06-27
26
675 Views
Last Modified: 2008-03-10
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
0
Comment
Question by:REA_ANDREW
  • 12
  • 5
  • 5
  • +1
26 Comments
 
LVL 23

Expert Comment

by:Jens Fiederer
ID: 16992395
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.
0
 
LVL 20

Author Comment

by:REA_ANDREW
ID: 16992412
sorry I am aware of all that but, how do programs online such as WYSIWYG achieve it? They have HTML rendered in the textbox.
0
 
LVL 23

Assisted Solution

by:Jens Fiederer
Jens Fiederer earned 250 total points
ID: 16992425
"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).
0
 
LVL 20

Author Comment

by:REA_ANDREW
ID: 16992446
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
0
 
LVL 20

Author Comment

by:REA_ANDREW
ID: 16992470
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
0
 
LVL 16

Expert Comment

by:alain34
ID: 16992480
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>
0
 
LVL 23

Expert Comment

by:Jens Fiederer
ID: 16992491
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.
0
 
LVL 20

Author Comment

by:REA_ANDREW
ID: 16992533
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.


0
 
LVL 16

Accepted Solution

by:
alain34 earned 250 total points
ID: 16992561
sorry mate, but I take this code from conceptRTE at http://www.conceptuel.co.uk/conceptRTE
Therefore I'm sure it is Iframe!!!
may be you are going to tell me that conceptRTE is not a WYSIWYG editor!
0
 
LVL 20

Author Comment

by:REA_ANDREW
ID: 16992567
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.
0
 
LVL 20

Author Comment

by:REA_ANDREW
ID: 16992581
"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.
0
 
LVL 16

Expert Comment

by:alain34
ID: 16992611
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!
0
 
LVL 23

Expert Comment

by:Jens Fiederer
ID: 16992630
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!
0
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
LVL 20

Author Comment

by:REA_ANDREW
ID: 16992657
do not be sorry, I appreciate your input.
0
 
LVL 16

Expert Comment

by:alain34
ID: 16992664
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!
0
 
LVL 12

Expert Comment

by:UnexplainedWays
ID: 16992668
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.
0
 
LVL 20

Author Comment

by:REA_ANDREW
ID: 16992675
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
0
 
LVL 16

Expert Comment

by:alain34
ID: 16992803
What is wrong zith the iframe method?
Why would it be better with a textarea?
0
 
LVL 23

Expert Comment

by:Jens Fiederer
ID: 16992832
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.
0
 
LVL 20

Author Comment

by:REA_ANDREW
ID: 16992834
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
0
 
LVL 20

Author Comment

by:REA_ANDREW
ID: 16992973
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.


0
 
LVL 12

Expert Comment

by:UnexplainedWays
ID: 16993544
Then how does gmail do it?
0
 
LVL 20

Author Comment

by:REA_ANDREW
ID: 16993562
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.

0
 
LVL 12

Expert Comment

by:UnexplainedWays
ID: 16993581
What about the right click?  It's exactly the same as a textarea.
0
 
LVL 20

Author Comment

by:REA_ANDREW
ID: 16993601
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.
0
 
LVL 12

Expert Comment

by:UnexplainedWays
ID: 16993805
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&amp;name=htmlcompose&amp;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.
0

Featured Post

What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

Join & Write a Comment

In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
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…

758 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

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now