How do some WYSIWYG editors keep formatting of pasted text? As an example, I copied italic red text from a text-editor into a WYSIWYG and it kept the text's color and style, how is this happening? For the longest I thought JavaScript had access the clipboards text only. Is this not the case? If so then, what is it?

How do some WYSIWYG editors keep formatting of pasted text? As an example, I copied italic red text from a text-editor into a WYSIWYG and it kept the text's color and style, how is this happening? For the longest I thought JavaScript had access the clipboards text only. Is this not the case? If so then, what is it?

• javascript
• jquery
• browser
• wysiwyg
• dom-events

4 Answers 4

There's a content type negotiation between the source and target during the copy/paste operation. It happens sort of like this:

1. You copy something into the copy and paste buffer. The copied data is tagged with, more or less, a MIME type and who put it there.
2. When you paste, the paste target tells the copy-and-paste system that it understands a specific list of MIME types.
3. The copy-and-paste system matches the available formats to the desired formats and finds text/html in both lists.
4. Someone (probably the original source of the data) then converts the paste buffer to text/html and drops it in the editor.

That's pretty much how things worked back when I was doing X11/Motif development (hey! get off my lawn you rotten kids!) so I'd guess that everyone does it pretty much the same way.

JavaScript has no direct access to the clipboard in general. However, all major browsers released over the past few years have a built-in WYSIWYG editing facility, via the contenteditable attribute/property of any element (which makes just that element editable) and the designMode property of document objects (which makes the whole document editable).

While the user edits content in the page, if they trigger a paste (via keyboard shortcuts such as Ctrl + V or Shift + Insert or via the Edit or context menus), the browser automatically handles the whole pasting process without any intervention from JavaScript. Part of this process includes preserving formatting wherever possible.

However, the HTML this produces can be gruesome and varies heavily between browsers. Many WYSIWYG editors such as TinyMCE and CKEditor employ tricks to intercept the pasted content and clean it before it reaches the editor's editable area.

What you're seeing is a rich text editor. There's some information in this Wikipedia article: http://en.wikipedia/wiki/Online_rich-text_editor

I think it copied the selected DOM instead