富文本框如Facebook评论框

Question

我目前正在处理http://flickogram.com。

我需要把丰富的评论文本框像Facebook一样。

目前，我已经开发了一个jQuery插件，你可以找到它的上http://jsfiddle.net/mike_ivanenko/k6zH6/3/

工作，就可以使用该插件如下。

$(document).ready(function() { 
    $('#ttt').richtextbox({ 
      highlights: [ 
       {char:'#', class:'highlighted', markup: 'topic'}, 
       {char:'@', class:'highlighted', markup: 'people'} 
      ] 
      ,change:function(richtextfield, input) { 
       $('#output').val(input.val()); 
      } 
     } 
    ); 
}); 

它工作得很好通过键入散列（＃）把话题，但我不能找到一种方法，通过键入@跟人打交道的名字。

我的意图如下。

当用户键入@时，带有搜索文本字段的下拉框将显示在当前文本框的下方，用户可以搜索该名称。

然后结果将显示在下拉菜单中，并且单击该项目将被输入到主文本字段中。但它应该是不可编辑的。通过[Delete]或[Backspace]键可以进行删除。

有什么建议吗？

或者请帮我出这对github.com/mike-ivanenko/richtextbox

谢谢

迈克

Answer 1

你应该看看HTML5的contenteditable功能

编辑：（固定）

这里是你需要的东西 http://jsfiddle.net/ZQSHT/2/

$('div').keyup(function(){ 
    var test = $(this).text(); 

if(test.indexOf('@') >= 0){ 
    // Found world 
    alert('@'); 
    $('input').focus(); 
} 
}); 
$('input').change(function(){ 
    alert($('input').val()); 
    $('div').append('<a href="http://www.mysite.com/profiles/#">@'+$('input').val()+'</a>'); 
});