一些所见即所得编辑器如何保持粘贴文本的格式?
一些所见即所得编辑器如何保持粘贴文本的格式?举个例子,我将斜体红色文本从文本编辑器复制到所见即所得中,它保留了文本的颜色和样式,这是怎么发生的?长期以来,我一直认为 JavaScript 只能访问剪贴板文本。难道不是这样吗?如果是的话,那是什么?
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?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(4)
在复制/粘贴操作期间,源和目标之间存在内容类型协商。它的发生有点像这样:
text/html
。text/html
并将其放入编辑器中。这就是我在进行 X11/Motif 开发时的情况(嘿!你们这些烂孩子,滚出我的草坪!),所以我猜每个人都以几乎相同的方式做这件事。
There's a content type negotiation between the source and target during the copy/paste operation. It happens sort of like this:
text/html
in both lists.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 通常无法直接访问剪贴板。然而,过去几年发布的所有主要浏览器都有一个内置的所见即所得编辑工具,通过任何元素的
contenteditable
属性/属性(这使得该元素可编辑)和designMode文档对象的
属性(这使得整个文档可编辑)。当用户编辑页面中的内容时,如果触发粘贴(通过键盘快捷键,例如 Ctrl + V 或 Shift + 插入 或通过编辑或上下文菜单),浏览器会自动处理整个粘贴过程,无需 JavaScript 的任何干预。此过程的一部分包括尽可能保留格式。
然而,它生成的 HTML 可能非常可怕,并且在不同浏览器之间差异很大。许多所见即所得编辑器(例如 TinyMCE 和 CKEditor)都采用 技巧 拦截粘贴的内容并在其到达编辑器的可编辑区域之前对其进行清理。
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 thedesignMode
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.
您看到的是一个富文本编辑器。这篇维基百科文章中有一些信息: http://en.wikipedia.org/wiki/Online_rich-text_editor
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
我认为它复制了选定的 DOM
I think it copied the selected DOM instead