How to make a WYSIWYG section on a web page?

Question

I want to know the basic principle used for WYSIWYG pages on the web. I started coding it and made it using a text area, but very soon I realized that I cannot add or show images or any HTML in the text area. So I made it using DIV, but I did not understand how I could make it editable.

So, in gist, I want to know how(in principle) to make an editable DIV section on a web page, something similar to Google docs or FCKEditor or TinyMCE.

I would be very grateful for any pointers and info.

Thanks!

Answer 1

TinyMCE is open-source, so you could take a look at how it works under the hood. :)

It appears from the installation directions that an HTML form section (to allow submitting the form to the server for storage) is made with a textarea inside which gets replaced with the TineMCE editor.

The source itself is referenced from the tiny_mce.js file that is referenced in the target HTML file, so that might be a good starting point to see how it works.

Good luck!

Edit:

Although I didn't spend a lot of time, looking at the source for TinyMCE seems to indicate that the editor itself is inside of an iframe, so that may explain how the images can be displayed in an "editable" area.

If you're curious, download the development package, and take a look at the tiny_mce/jscripts/tiny_mce/classes/Editor.js. From around line 400, it appears that they're setting up an iframe and adding it to the DOM of the target HTML.

Answer 2

There's the contentEditable flag that can be added to any element on a page to make it editable, eg.

<div contentEditable>I am editable!!!!</div>

Should work in all major browsers nowadays, and things like shortcuts keys (cmd/ctrl-b, etc) will Just Work.

Form submission can then be done by pulling innerHTML out of the editable region.

Answer 3

Use TinyMCE and turn off the toolbars.

Seriously, making a WYSIWYG editor for the web is a lot more complicated than it sounds and there are a million ways you can go wrong. You could spend the next two months battling with different browsers and stuff that breaks for no good reason, or you can trust the people who know more about the subject than you or I do.

TinyMCE is impressively configurable, and you can hide all the toolbars just by using the simplest configuration options:

tinyMCE.init({
    mode: 'textareas',
    theme: 'advanced',
    theme_advanced_buttons1 : '',
    theme_advanced_buttons2 : '',
    theme_advanced_buttons3 : '',
    theme_advanced_statusbar_location : "none",
});

You can also use normal CSS to make the

.mceLayout {
    background: none !important;
    border: none !important;
}

I'm not sure what you want the WYSIWYG area for, but chances are you'll need to get the contents at some point. You can do this with simple Javascript:

var editor = tinyMCE.get('editorid');
var stuff = editor.getContent();

It's free, easy to use, and proven reliable by lots of users. There's no good reason to reinvent the wheel.

Answer 4

What you see is what you mean is the way - don't follow the WYSIWYG path as it is full of traps.

WYMeditor is the best when it comes to outputting semantic and clean HTML.