jquery 如何监听黏贴事件 ,并把黏贴内容插入到光标之后 ?

2013-01-28 00:10:08 +08:00
 yeelone
有下面一个div 内容 :
<div class='content' id='"+ id +"-content' contenteditable='true' spellcheck='false'> </div>

我想实在像富文本编辑器那样的功能,可以黏贴内容 ,插入到光标的位置 。
监听事件是这样写的:
$(".content").live('paste', function (e) {
var self = this;
setTimeout(function() {
var paste_values = $(self).text();
var new_values = $.htmlClean(paste_values, { format: true,allowedTags:["a",] });//清除HTML格式 。
$(self).text(new_values);
},0);
});

但是这样的话,会同时取出所有的 内容 ,包括黏贴之前的内容也会被清除掉格式,这不是我想要的,所有原先内容的格式都希望保留,只想单纯把新黏贴的内容取出并去掉所有html格式 。

请问,这该如何做呢?
问题一:如何取出黏贴的内容 ,如我上面的代码中,$(self).text(); 这样会取出editor中所有的内容 。我只想要黏贴的内容
问题二:如果把这个内容 播放 到光标位置之后 ?

请大家帮帮忙。谢谢。
5781 次点击
所在节点    问与答
16 条回复
ljbha007
2013-01-28 00:33:23 +08:00
$(".content").live('paste', function (e) {
var self = this;
var prev_len = $(self).text().length;
setTimeout(function() {
var now_len = $(self).text().length;
var paste_values = $(self).text().slice(prev_len, now_len - prev_len);
var new_values = $.htmlClean(paste_values, { format: true,allowedTags:["a",] });//清除HTML格式 。
$(self).text(new_values);
},0);
});
ljbha007
2013-01-28 00:34:23 +08:00
$(".content").live('paste', function (e) {
var self = this;
var prev_len = $(self).text().length;
setTimeout(function() {
var now_len = $(self).text().length;
var paste_values = $(self).text().slice(prev_len, now_len - prev_len);
var old_values = $(self).text().slice(0, prev_len);
var new_values = $.htmlClean(paste_values, { format: true,allowedTags:["a",] });//清除HTML格式 。

$(self).text(old_values + new_values);
},0);
});
yeelone
2013-01-28 11:01:53 +08:00
@ljbha007 谢谢。
NemoAlex
2013-01-28 11:17:03 +08:00
标题这什么字?怎么读啊?
楼主用的什么输入法?“粘贴”都打不出来么?
yeelone
2013-01-28 11:19:07 +08:00
@ljbha007 HI,想再请问你一个问题,因为黏贴嘛,是黏贴在光标的位置 ,但是如上代码中,是默认认为黏贴的内容是在最后,但有时候是在中间某个位置 ,所以如何做到,把黏贴的内容插入到光标位置之后呢?
我在想,先取出光标之前的内容,光标之后的内容 ,再 把黏贴的内容 插入在中间。
但是问题,我不知道怎么取出光标的位置 ,在网上找了很多代码,都没有用。
比如 :

$.fn.getCursorPosition = function() {
var el = $(this).get(0);
var pos = 0;
if('selectionStart' in el) {
console.log('selectionStart');
pos = el.selectionStart;
} else if('selection' in document) {
console.log('selection');
el.focus();
var Sel = document.selection.createRange();
var SelLength = document.selection.createRange().text.length;
Sel.moveStart('character', -el.value.length);
pos = Sel.text.length - SelLength;
}
return pos;
}

两个if 都没有进去。
ljbha007
2013-01-28 11:21:57 +08:00
@yeelone
我也得慢慢去研究啦
刚才干了个很蠢的事 现在没心情研究了
http://www.v2ex.com/t/58974#reply12
kamal
2013-01-28 12:41:37 +08:00
获取/设置光标位置 http://jsbin.com/ibiwa6/1/edit
yangg
2013-01-28 13:00:30 +08:00
提一下,建议不要再使用jQuery的live方法,建议使用on或者delegate
http://jquery.com/upgrade-guide/1.9/#live-removed
mopig
2013-01-28 13:10:37 +08:00
@NemoAlex 卤煮 打 [niantie] ,粘贴 组词的时候念 [zhantie]
yeelone
2013-01-28 13:19:59 +08:00
@kamal 似乎对 div contenteditable 不起作用,只能作用于 textarea
yeelone
2013-01-28 13:22:04 +08:00
@yangg 谢谢。
kamal
2013-01-28 13:31:57 +08:00
yeelone
2013-01-28 16:51:44 +08:00
@kamal 请问,如何 在 pasteHtmlAtCaret(html) 里,取得粘贴的内容? 有没有哪个方法提供了这样的功能 ?
kamal
2013-01-28 18:52:13 +08:00
这个代码库把有关拷贝粘贴的功能都封装好了
http://code.google.com/p/rangy/
isy
2013-01-28 21:50:32 +08:00
最新版本的 jQuery 把 live 事件去掉了
skydiver
2013-01-28 21:54:49 +08:00
@isy 用 .on()就行了吧

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/58981

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX