Богатое текстовое поле, например, поле для комментариев 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()); 
      } 
     } 
    ); 
}); 

Она работает довольно хорошо для ввода темы, набрав хэш (#), но я не могу найти способ, чтобы иметь дело с именем людей, набрав @.

Мое намерение заключается в следующем.

Когда пользовательский тип @, раскрывающееся поле с текстовым полем поиска будет показано чуть ниже текущего текстового поля, и пользователь может найти имя.

Тогда результат будет показан в раскрывающемся списке, а при нажатии элемент будет введен в основное текстовое поле. Но он должен быть не редактируемым. Доступно удаление с помощью клавиши [Удалить] или [Backspace].

Любые предложения?

Или, пожалуйста, помогите мне это на github.com/mike-ivanenko/richtextbox

Спасибо

Майк

Answer 1

вы должны проверить html5-х contenteditable функция

Edit: (фиксированная)

вот что вам нужно 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>'); 
});