Я делаю текстовый редактор для своего блога. Я хочу предоставить пользователям небольшой набор инструментов, где они могли бы редактировать свои сообщения в блоге, выбирая текст и применяя некоторые стили, например выделяя выделенный текст полужирным шрифтом или курсивом или окрашивая выделенный текст в какой-либо цвет. Также варианты для вставки изображений и ссылок на видео.
Я искал переполнение стека, но не смог найти удовлетворительного решения.
Было бы здорово, если бы кто-нибудь помог мне найти позицию каретки для выбора (или без выбора). Я попробовал плагин jQuery Caret, но он не работает.
Мой код выглядит так (пришел к этому чтению сообщения только о переполнении стека):
HTML:
<div id="editor" contentEditable="true">
Initial text...
</div>
В отдельном JS-файле:
(function(){
$("#editor").bind("keydown keypress mousemove", function() {
alert("Current position: " + $(this).caret().start);
});
}());
Я получаю следующую ошибку в Firebug, когда страница загружается и ничего не происходит при нажатии клавиши или любом другом событии:
В нем говорится:
f.value не определено
Я также попробовал эту ссылку
но представленное здесь решение не будет работать, если внутри исходного div есть какой-либо другой тег.
Пожалуйста, помогите. Кроме того, если у вас есть лучшие возможные решения или совершенно другой подход, помогите мне.
