How to make an HTML/JS WYSIWYG editor?
JavascriptHtmlJavascript Problem Overview
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?
Javascript Solutions
Solution 1 - Javascript
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:
Solution 2 - Javascript
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>
If i can help you in any way i am very happy doing that.
Thank you for asking this question and for increasing my curiosity towards JavaScript.
Solution 3 - Javascript
Basically they hide your textarea and place an iframe as an editor field. They capture your input (text + formating) and write the corresponding HTML into the iframe. If you submit your form including the original textarea they copy the content of the iframe into the textarea and therefore the html code gets submitted.
Well, this is quite simplified.