inyfee
V2EX  ›  问与答

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

  •  
  •   inyfee · Jan 28, 2013 · 6394 views
    This topic created in 4859 days ago, the information mentioned may be changed or developed.
    有下面一个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中所有的内容 。我只想要黏贴的内容
    问题二:如果把这个内容 播放 到光标位置之后 ?

    请大家帮帮忙。谢谢。
    16 replies    1970-01-01 08:00:00 +08:00
    ljbha007
        1
    ljbha007  
       Jan 28, 2013
    $(".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
        2
    ljbha007  
       Jan 28, 2013   ❤️ 1
    $(".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);
    });
    inyfee
        3
    inyfee  
    OP
       Jan 28, 2013
    @ljbha007 谢谢。
    NemoAlex
        4
    NemoAlex  
       Jan 28, 2013
    标题这什么字?怎么读啊?
    楼主用的什么输入法?“粘贴”都打不出来么?
    inyfee
        5
    inyfee  
    OP
       Jan 28, 2013
    @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
        6
    ljbha007  
       Jan 28, 2013
    @yeelone
    我也得慢慢去研究啦
    刚才干了个很蠢的事 现在没心情研究了
    http://www.v2ex.com/t/58974#reply12
    kamal
        7
    kamal  
       Jan 28, 2013
    获取/设置光标位置 http://jsbin.com/ibiwa6/1/edit
    yangg
        8
    yangg  
       Jan 28, 2013
    提一下,建议不要再使用jQuery的live方法,建议使用on或者delegate
    http://jquery.com/upgrade-guide/1.9/#live-removed
    mopig
        9
    mopig  
       Jan 28, 2013
    @NemoAlex 卤煮 打 [niantie] ,粘贴 组词的时候念 [zhantie]
    inyfee
        10
    inyfee  
    OP
       Jan 28, 2013
    @kamal 似乎对 div contenteditable 不起作用,只能作用于 textarea
    inyfee
        11
    inyfee  
    OP
       Jan 28, 2013
    @yangg 谢谢。
    inyfee
        13
    inyfee  
    OP
       Jan 28, 2013
    @kamal 请问,如何 在 pasteHtmlAtCaret(html) 里,取得粘贴的内容? 有没有哪个方法提供了这样的功能 ?
    kamal
        14
    kamal  
       Jan 28, 2013
    这个代码库把有关拷贝粘贴的功能都封装好了
    http://code.google.com/p/rangy/
    isy
        15
    isy  
       Jan 28, 2013
    最新版本的 jQuery 把 live 事件去掉了
    skydiver
        16
    skydiver  
       Jan 28, 2013
    @isy 用 .on()就行了吧
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   972 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 43ms · UTC 20:07 · PVG 04:07 · LAX 13:07 · JFK 16:07
    ♥ Do have faith in what you're doing.