编辑器为什么会将数据粘贴到文本区域中，就像富文本所见即所得编辑器一样？

Question

我想从网站复制/粘贴HTML并将其存储在MySQL数据库中。为此，我查看了CKEditor，它允许我粘贴HTML，甚至是Word文档，并为其生成HTML代码。由于我只想“生成”已粘贴的数据作为HTML，而不是使用完整的所见即所得编辑器（如CKEditor），我想编写一些代码（可能使用jQuery）来转换已粘贴的数据以具有HTML标记和格式。

为了实现这个功能，这些在线编辑器是如何做到的？它们如何将剪贴板数据转换为HTML代码？为什么当我将HTML格式的文本或div或按钮粘贴到这里的文本区域时只会得到纯文本，而在所见即所得编辑器上却可以得到图像和正确大小的div？

编辑器是否访问剪贴板数据并对其进行操作？剪贴板是否以组织良好的方式保存格式化数据，以允许“CKEditor”或其他编辑器对其进行操作？

这是否可以使用jQuery完成？还是我们还需要服务器端代码？

如果您能就这些问题提供一些解答，我将不胜感激。我只想知道方法，以便我可以编写适当的代码。

参考：http://ckeditor.com/demo

- Logan

---

我想你可以将HTML粘贴到带有contenteditable="true"属性的元素中，并使用一些脚本从中获取内部HTML。 - Tim M.

Answer 1

这里有一个初步的演示，适用于Chrome、IE9和Safari：http://jsfiddle.net/SN6PQ/2/

<div contenteditable="true" id="paste-target">Paste Here</div>​

$(function(){
    $("#paste-target").on("paste", function(){
        // delay, or else innerHTML won't be updated
        setTimeout(function(){

            // option 1 - for pasting text that looks like HTML (e.g. a code snippet)
            alert($("#paste-target").text());

            // option 2 - for pasting actual HTML (e.g. select a webpage and paste it)
            alert($("#paste-target").html());
        },100);
    });        
});​

不确定这是否符合您的要求，但它会在粘贴时警告 HTML。请注意，可编辑内容元素可能会更改粘贴时的标记。

- Tim M.

---

谢谢，这正是我想要的...所以jQuery有一个粘贴事件...非常有趣！ - Logan

很高兴它能够工作。关于粘贴，有许多问题需要解决，如果您想要完善我的示例，例如：https://dev59.com/-3RB5IYBdhLWcg3wN08P?lq=1 - Tim M.

啊，我在研究的时候确实看到过那篇帖子，但没能理解它也是以html形式粘贴的。顺便说一下，我已经查了一下JavaScript的粘贴事件兼容性，这里是链接：cutcopypaste。 - Logan