Menu
I've tried many different Google searches but I haven't been able to find a current tutorial (newer than 2006) on how to actually create a WYSIWYG editor. I realize there are many already, but I'm curious as to how they actually work. I've looked over some of the source code, but it's a lot to digest. It seems formatted text can't be placed in a textarea box, and yet they give the illusion of doing just that - how?
768
In WYSIWYG editors the edited content whether text or graphics, appears in a form close to a final product. So instead of manually writing source code, you deal with a convenient rich text editor in which you manipulate design elements.
Adobe Dreamweaver is a great WYSIWYG HTML editor, but it does so much more as well. You can use it to edit code in JavaScript, CSS, PHP, and more. On top of that, Adobe Dreamweaver allows you to use layouts and templates to make the process simpler.
Javascript WYSIWYG editors do not use a textarea (at least not externally, it is likely that behind the scenes there is a textarea that is populated with the code that makes up the WYSIWYG content so that it can be posted in a form).
Rather, there are two properties that are used to make an editable area in a webpage: designMode, which applies to a whole document, or contentEditable, which applies to a specific element. Both properties were originally Microsoft innovations, but have been adopted by all major browsers (contentEditable is now part of HTML5).
Once a document (in terms of rich text editors this generally means embedding an iframe with designMode set into your page) or element is made editable, formatting is done by using the execCommand method (for which there are a number of different modes -- bold, italics, etc. -- which are not necessarily the same across all browsers. See this table for more info).
In order to pass content from the editable element to the server, generally the innerHTML of the editable element, is loaded into a textarea, which is posted. The makeup of the HTML generated depends on the browser.
Resources:
59
I have a good idea take this code to make a cool WYSIWYG editor-
To make a nice editor I have made a code with JavaScript that will open a new window containing the result-
Let's start with the Body-
<body> <textarea style="height:400px;width:750px;overflow:auto;"onblur="x=this.value"></textarea> <br /> <button onclick="ShowResult()">see result!</button> </body> Now we continue with the JavaScript-
function ShowResult() { my_window = window.open("about:blank", "mywindow1"); //By the above line code we have opened a new window my_window.document.write(x); //Here we have added the value of the textarea to the new window } Let's see the code on-whole:-
<html> <script type="text/javascript"> function ShowResult() { my_window = window.open("about:blank", "mywindow1"); my_window.document.write(x); } </script> <body> <textarea style="height:400px;width:750px;overflow:auto;" onblur="x=this.value"> </textarea><br /> <button onclick="ShowResult()">see result!</button> </body> </html> Thank you for asking this question and for increasing my curiosity towards JavaScript.
38
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
