什么使得编辑器将textarea上的数据粘贴为html-like在丰富的wysiwyg编辑器中？

我想从网站复制/粘贴html并将它们存储在mysql数据库中。要做到这一点，我已经检查出CKEditor，它允许我粘贴html，甚至word文档，并且它会为它生成html代码。因为我想要的只是将粘贴的数据“生成”为html，而不是像CKEditor那样使用完整的wysiwyg编辑器，所以我想编写一些代码（可能使用jquery）将粘贴的数据转换为html标签和格式。什么使得编辑器将textarea上的数据粘贴为html-like在丰富的wysiwyg编辑器中？

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

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

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

如果你可以对这个问题有所了解，我将不胜感激。我只想知道该方法，以便我可以为其编写适当的代码。

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

来源

2012-11-29 Logan

我想你可以将HTML粘贴到contenteditable =“true”的元素中，并通过一些脚本来获取内部HTML。 –

这里的粗演示其在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。请记住，内容可编辑元素可能会更改粘贴上的标记。

来源

2012-11-29 02:05:22

谢谢，这正是我之后...所以有一个粘贴事件jquery ...最有趣！ – Logan

很好用。如果您想对我的示例进行优化，则粘贴时会出现各种问题，例如http://stackoverflow.com/questions/686995/jquery-catch-paste-input?lq=1 –

啊，我在研究过程中看到过这篇文章，但没有理解它也粘贴为html。顺便说一句，我已经查找了JavaScript的粘贴事件兼容性，这里是：[cutcopypaste]（http://www.quirksmode.org/dom/events/cutcopypaste.html） – Logan

什么使得编辑器将textarea上的数据粘贴为html-like在丰富的wysiwyg编辑器中？

回答

相关问题