javascript – 是什么让编辑器在富有的wysiwyg编辑器中将textarea上的数据粘贴为html-like?

前端之家收集整理的这篇文章主要介绍了javascript – 是什么让编辑器在富有的wysiwyg编辑器中将textarea上的数据粘贴为html-like?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我想从网站复制/粘贴html并将它们存储在 mysql数据库中.要做到这一点,我已经检查了CKEditor,它允许我粘贴 HTML,甚至Word文档,它为它生成HTML代码.因为我想要的是“生成”粘贴的数据为html,而不是使用像CKEditor这样的完整的所见即所得编辑器,我想编写一些代码(可能还有 jquery)来将粘贴的数据转换为具有html标签和格式.

要实现此功能,这些在线编辑器会做什么?他们如何将剪贴板数据转换为HTML代码?为什么我在这里将html格式化的文本或div或按钮粘贴到此textarea以及wysiwyg编辑器上的图像和正确大小的div时,只获得文本?

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

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

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

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

解决方法

这是一个粗略的演示,适用于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.请记住,内容可编辑元素可能会更改粘贴时的标记.

猜你在找的JavaScript相关文章