Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How does one go about writing a simple WYSIWYG editor in JavaScript?

In my project I need to write small WYSIWYG editor (just let users make text bold/italic/underline and maybe some more). So I wouldn't like to use monsters like tinymce or fckeditor. My question is what HTML elements and javascript functions do I need to know for it? An HTML element in which I can edit and format text is a very interesting thing in this question.

like image 566
user101159 Avatar asked May 04 '09 21:05

user101159


People also ask

How do I use WYSIWYG HTML editor?

Essentially the steps are: Download and install the editor JavaScript code. Create or edit a Web form that contains one or more textarea elements. Add a small chunk of JavaScript to convert the textarea element(s) into WYSIWYG editor(s)

Is a sample of WYSIWYG editor where you can create your own website for free?

Wix is the most popular website builder tool that holds about 22.61 percent share of the overall website builders market. The WYSIWYG website builder is free and you can use it to create fully immersive and responsive websites.

What is a WYSIWYG editor give example?

Microsoft Word is a common example that helps to define a WYSIWYG editor. You have a blank page with some formatting tools that allow you to add and format words, tables, images, and so forth. What you see on the screen is exactly what you see when you print or share the document.


2 Answers

If you want to roll your own, look at Midas. It's available in FF3+, IE, Safari, Opera, Chrome.

Basically, you use contentEditable and execCommand to turn the browser into an RTE.

like image 112
seanmonstar Avatar answered Oct 26 '22 08:10

seanmonstar


document.getElementById('edit').contentDocument.designMode = "on";

Have a look at http://www.mozilla.org/editor/ie2midas.html

like image 22
cherouvim Avatar answered Oct 26 '22 08:10

cherouvim