Если нет желания подключать тяжелые визуальные редакторы текста, или тем более писать что то подобное самому, можно слегка доработать стандартный textarea. Что сейчас и будет описано в статье. Ну и конечно ссылка на демо внизу статьи.
Первое, что необходимо сделать - это создать примитивный редактор, который мог бы делать форматирование текста, а так же вставлять гиперссылки в текст. Редактор удобно расположить рядом с курсором мыши, чтобы не перемещаться по экрану за поиском нужной клавиши.
Второе - это запоминать, все что мы вводим в текстовое поле. Если при редактировании текста, нам отключат интернет или еще хуже электричество, мы ничего не потеряем.
Третье - не принципиально важное решение - это вести подсчет количества символов в текстовом поле.
Редактор.
Для того чтобы любой блок появился рядом с курсором, нужно сделать настройки позиционирования:
var i=document.createElement("div");
i.style.position="fixed",
i.style.left=e.clientX+"px",
i.style.top=e.clientY+"px"
...
Код создает объект "DIV" и задает ему принцип позиционирование "fixed", что означает позиционирование относительно окна браузера.
e.clientX и e.clientY - координаты курсора мыши, поэтому если с телефона начать смотреть демо - то редактора вы там не увидите, как его переделать для мобильных устройств, будет описано в следующей статье.
Все элементы этого редактора относятся к выделенному тексту внутри текстового блока, поэтому показать редактор нужно именно тогда, когда пользователь выделил участок текста.
Для обнаружения этого действия используется событие onmouseup, внутри которого происходит манипуляция с аттрибутами selectionStart и selectionEnd для объекта текстового поля. Примечательно то, что selectionEnd всегда больше selectionStart, неважно в какую сторону вы выделяете текст. Поэтому при выборе одной из кнопок форматирования открывающий тег всегда будет на позиции Start, а закрывающий на позиции End.
Запоминание содержимого ввода.
Для запоминания того, что мы ввели в текстовое поле, лучше всего воспользоваться COOKIE. Именно в них мы будем записывать содержимое текстового поля, используя события onkeyup.
COOKIE доступны как для клиента так и для сервера, поэтому после возвращения электричесва и перехода на страницу редактирования, можно дать комманду серверу восстановить несохраненные данные в поле ввода текста.
Для того чтобы поставить COOKIE, нужно передать три значения это имя переменной, значение переменной и для какого домена или поддомена она устанавливается.
Имя переменной - должно быть уникальным для конкретного текстового поля, если конечно текстовых полей на сайте много. Это может быть сочетание какого либо префикса с номером статьи открытым на редактирование. Значение переменной это содержимое самого текстового поля. И доменное имя сайта для которого размещается переменная. Чтобы переменная COOKIE работала на всех поддоменах, а также если доменное имя используется с www и без него, необходимо перед доменным именем указать точку.
И третье самое простое - подсчет количества введенных символов.
Ограничение на поля ввода устанавливать необходимо если вы каким либо образом взаимодействуете с пользователями. Например увидить с утра полотно одного комментария (одного) не очень приятно, особенно когда статья всего на 1000 символов.
Поэтому необходимо пользователю об этом сказать.
Подсчет - это не сложная задача, в которой необходимо вычислить разницу между атрибутами maxLength и value.length текстового поля.
Демонстрация работы: PS На мобильных устройствах редактор не работает (нет мыши), об этом говорилось в статье. COOKIE можно только через расширение или консоль браузера.
