Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do online rich text editors work?

Tags:

I was wondering how online rich text editors maintain the formatting when you paste text from a webpage or document. A standard textarea box only takes text while these WYSIWYG editors seem to use a DIV. How does it work?

like image 710
hoju Avatar asked Dec 23 '09 00:12

hoju


People also ask

How does a rich text editor work?

The Rich Text Editor is a tool that allows you to add or edit content, images, links, and other components on the page without having to know any code. It displays the content and any formatting as it would display in the browser.

Can you edit rich text?

Edit an enhanced rich text column Open the list you want to edit. Select the list item, right click, and then select Edit. to display the Edit window. Note that you can't edit an enhanced rich text column in Quick Edit view.

How do WYSIWYG editors work?

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.

How do you implement rich text editor?

In the Content Type Builder page, add the Rich Text Editor (RTE) field to it. In the Edit Properties section of the RTE field, under Editor Version, select Latest. Under the Editor Type, select Custom, and choose the formatting options you want to include in the RTE field.


2 Answers

Online rich text editors use contentEditable or designMode to take advantage of the browser's native support for HTML editing. When you paste into a contentEditable or designMode element, the browser puts HTML directely into the element. Try it yourself by pasting into Midas Demo and then using Firebug's inspect element to look at the HTML you pasted.

JavaScript applications can use the execCommand method to format the user's selection in a rich text editor.

like image 81
Annie Avatar answered Sep 24 '22 05:09

Annie


WYSIWYG Editors actually build on top of basic HTML Editing functionality that the browsers already have built in. In Firefox, the technology is called Midas. In IE, contentEditable.

like image 28
Pekka Avatar answered Sep 21 '22 05:09

Pekka