How do some WYSIWYG editors keep formatting of pasted text?

Question

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?

score 4 · Accepted Answer · answered Dec 19 '10 at 04:47

4

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

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.
When you paste, the paste target tells the copy-and-paste system that it understands a specific list of MIME types.
The copy-and-paste system matches the available formats to the desired formats and finds text/html in both lists.
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.

answered Dec 19 '10 at 04:47

mu is too short

426,620
70
833
800

JavaScript in general has access to precisely none of this process, so this is irrelevant. – Tim Down Dec 19 '10 at 13:25
3

@Tim Down: JavaScript doesn't but the browser does so you're wrong or just being overly pedantic. The underlying editable HTML element does have access to this process through the browser. Generally the in-browser GUI editors work by replacing a `` with an editable `<div>` and the browser provides the content type negotiation for the editable `<div>`.</div></div> – mu is too short Dec 19 '10 at 17:04
OK. I don't think I'm wrong, but I'm not going to get into an argument. Your answer has some merit as background but really does very little to actually answer the question. – Tim Down Dec 19 '10 at 18:21
Do you have some examples of online rich text editors? – Quidam Nov 03 '19 at 14:20
I've googled that. It's the first thing I do. Suggestions from human beings are often more valuable. – Quidam Nov 03 '19 at 16:38

score 2 · Answer 2 · edited May 23 '17 at 10:29

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.

score 1 · Answer 3 · answered Dec 19 '10 at 04:48

1

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

answered Dec 19 '10 at 04:48

Mark Ransom

299,747
42
398
622

score 0 · Answer 4 · answered Dec 19 '10 at 04:19

0

I think it copied the selected DOM instead

answered Dec 19 '10 at 04:19

NanoHead

159
3
15

How do some WYSIWYG editors keep formatting of pasted text?

4 Answers4