一些所见即所得编辑器如何保持粘贴文本的格式?

发布于 2024-10-08 06:51:07 字数 130 浏览 0 评论 0原文

一些所见即所得编辑器如何保持粘贴文本的格式?举个例子,我将斜体红色文本从文本编辑器复制到所见即所得中,它保留了文本的颜色和样式,这是怎么发生的?长期以来,我一直认为 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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(4

何其悲哀 2024-10-15 06:51:07

在复制/粘贴操作期间,源和目标之间存在内容类型协商。它的发生有点像这样:

  1. 您将某些内容复制到复制和粘贴缓冲区中。复制的数据或多或少带有 MIME 类型以及将其放在那里的人的标记。
  2. 粘贴时,粘贴目标会告诉复制粘贴系统它了解特定的 MIME 类型列表。
  3. 复制粘贴系统将可用格式与所需格式进行匹配,并在两个列表中找到 text/html
  4. 然后,某人(可能是数据的原始来源)将粘贴缓冲区转换为 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:

  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.

蓝梦月影 2024-10-15 06:51:07

JavaScript 通常无法直接访问剪贴板。然而,过去几年发布的所有主要浏览器都有一个内置的所见即所得编辑工具,通过任何元素的 contenteditable 属性/属性(这使得该元素可编辑)和 designMode文档对象的 属性(这使得整个文档可编辑)。

当用户编辑页面中的内容时,如果触发粘贴(通过键盘快捷键,例如 Ctrl + VShift + 插入 或通过编辑或上下文菜单),浏览器会自动处理整个粘贴过程,无需 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 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.

梦纸 2024-10-15 06:51:07

您看到的是一个富文本编辑器。这篇维基百科文章中有一些信息: 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

极度宠爱 2024-10-15 06:51:07

我认为它复制了选定的 DOM

I think it copied the selected DOM instead

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文