富文本框，如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());
            }
        }
    );
});

通过键入hash（＃）来放置主题，效果很好，但是我找不到通过@处理姓名的方法。

我的意图如下。

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

然后结果将显示在下拉列表中，单击后将在主文本字段中输入该项目。 但是它应该是不可编辑的。 可用[删除]或[退格]键删除。

有什么建议么？

或者请在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>');
});