javascript - 是什么让编辑器在丰富的所见即所得编辑器中将 textarea 上的数据粘贴为 html -like？

Question

我想从网站复制/粘贴 html 并将它们存储在 mysql 数据库中。为此，我检查了 CKEditor，它允许我粘贴 html，甚至 word 文档，并为其生成 html 代码。由于我想要的只是将粘贴的数据“生成”为 html，而不是使用像 CKEditor 这样的完整的所见即所得编辑器，我想编写一些代码(可能使用 jquery)来将粘贴的数据转换为具有 html 标签和格式。

为了实现这个功能，这些在线编辑器是做什么的？他们如何将剪贴板数据转换为 html 代码？为什么当我将 html 格式的文本或 div 或按钮粘贴到此处的文本区域时，以及在所见即所得编辑器上粘贴图像和适当大小的 div 时，为什么我只得到文本？

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

这可以用 jQuery 完成吗？或者我们还需要服务器端代码吗？

如果您能阐明这个主题，我将不胜感激。我只想知道该方法，以便我可以为其编写适当的代码。

供引用:http://ckeditor.com/demo

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。请记住，内容可编辑元素可能会更改粘贴时的标记。