javascript - 类似于 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(#) 来放置主题非常有效，但我找不到通过输入 @ 来处理人名的方法。

我的意图如下。

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

然后结果将显示在下拉列表中，单击该项目将被输入到主文本字段中。但它应该是不可编辑的。可以通过[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>');
});