Я делаю систему упоминаний наподобие той, что в Facebook, сейчас я добился этого с помощью текстовой области, но теперь я хочу, чтобы она работала с contenteditable div, чтобы я мог форматировать текст внутри.что теперь происходит, когда вы нажимаете «@» и букву, которую он ищет в массиве, результаты, содержащие эту букву, с помощью автозаполнения JQuery-UI, когда вы выбираете результат, он отображает результат в div, но теперь я хочувыделите упоминание как Facebook, поэтому я поставил:
<b style="background: #somecolor"></b>
Итак, упоминание выглядело так:
<b style="background: #somecolor">Mention</b>
пока все хорошо, но когда я хочу продолжать писать, весь новый текст, который я написал, идет внутри <b></b>, выглядя так:
<b style="background: #somecolor">Mention all my new text</b>
Вместо <b style="background: #somecolor">Mention</b> all my new text
Итак, весь новый текст был выделен, вот картинка:
http://dev.frinki.com/question/1.png
Итак, это код JavaScript, который я использую
$("#Conversacion").bind("keydown", function(event) {
if (event.keyCode === $.ui.keyCode.TAB && $(this).data("autocomplete").menu.active) {
event.preventDefault();
}
}).autocomplete({
minLength: 0,
source: function(request, response) {
var term = request.term,
results = [];
console.log(term);
if (term.indexOf("@") >= 0) {
term = extractLast(request.term);
if (term.length > 0) {
results = $.ui.autocomplete.filter(availableTagsFollowing, term);
} else {
//results = ['Start typing...'];
}
}
response(results);
},
focus: function() {
// prevent value inserted on focus
return false;
},
select: function(event, ui) {
var terms = split(this.innerHTML);
// remove the current input
terms.pop();
// add the selected item
terms.push('<b style="background:#E0FFC5">' + ui.item.label + '</b>');
this.innerHTML = terms.join("");
$('#mentionsHidden').val($('#mentionsHidden').val() + '@['+ui.item.value+':'+ui.item.label+']');
mentionsString = $('#mentionsHidden').val();
return false;
}
});
А это HTML-код
<div name="Descripcion" id="Conversacion" class="Conversacion" contenteditable="true"></div>
Это изображение Chrome Inspector:
http://dev.frinki.com/question/2.png
Я посмотрел в Facebook, чтобы увидеть, как это делается, это фотография инспектора Chrome в Facebook:
3.png (тот же домени папку с двумя другими изображениями, извините за это, это новый пользователь, и я не могу опубликовать более 2 ссылок)
Кажется, что Facebook, когда вы выбираете человека, которого нужно упомянуть, создает новую строку вдиапазон, который он использует, поэтому текст отделен от <b></b>.
Ну, я надеюсь, что кто-то может мне помочь.
Кстати, мне ужасно жаль моего английского,Я из Южной Америки.