Делаем визуальный редактор в HTML своими руками
Года два назад скриншоты визуального редактора на сайте www.saitistika.ru вызывали восхищение и в то же время недоверие. Каждому, кто хоть немного знаком с HTML, очевидно, насколько ограничены возможности по управлению стандартной формой textarea. И, казалось бы, это единственный инструмент для ввода многострочных текстов в HTML, не считая ActiveX-включений. Однако с распространением Open Source кланов визуального редактора RichEditor оказалось, что разработчиками MS Internet Explorer предусмотрен многофункциональный интерфейс для ввода и правки текстов в пользовательских формах (стабильная работа метода поддерживается в IE версии от 5.0 и выше). И, более того, для включения этого интерфейса достаточно лишь установить одно «волшебное» свойство designMode в значение «on».
И как же это делается? Да очень просто. Мы создаем в HTML-коде страницы редактора объект (для этих целей подойдет конструкция iFrame) и идентифицируем его. Скажем, как newTextArea.
Далее добавляем Java-script-код с одной командой:
Попробуйте теперь открыть полученный HTML-файл в IE. Перед нами просторное поле ввода. Вы наверняка сразу же принялись набирать текст. Попробуйте стандартные для Windows команды редактирования (Ctrl-Z — для отката назад, Ctrl-B — для установки стиля выделенного текста в Bold, Ctrl-I для установки стиля в Italic и т.д.). Однако вслед за восторгом от открывающихся перспектив предупреждающим сигналом в сознании звучит: «А как же это использовать практически?!». Для начала нам может понадобиться загрузить в окно редактора какой-либо текст. Это можно сделать стандартной печатью в объект.
newTextArea.document.writeln('Текст'); Хотя, по всем правилам, стоит открыть и закрыть документ объекта
newTextArea.document.open(); newTextArea.document.writeln('Текст'); newTextArea.document.close(); если у вас возникло желание приукрасить текстовое поле. Таким же образом можно направить в объект редактора таблицу стилей (CSS). Но какой смысл вводить или редактировать текст, если нет возможности сохранить изменения?! А сохранить их тоже очень просто. Достаточно создать в начале документа форму, а в ее теле — скрытое поле.
Скажем, имя нашей формы будет myform, имя скрытого поля message. Теперь используем это поле как идентификатор. Мы создадим в теле основного документа кнопку, которой назначим событие:
document.myform.message.value = newTextArea.document.body.innerHTML; myform.submit();
Тем самым мы присваиваем объекту Java-script message содержимое поля ввода редактора на данный момент. И после этого передаем содержимое формы myform на сервер. На стороне сервера мы можем принять содержимое формы посредством сервер-ориентированного языка программирования. Но это уже совсем другая история.
Вам наверняка попадались на глаза буклеты от разработчиков систем управления контентом с заявленной там совместимостью их визуальных редакторов с MS-Word. Желаете заявить то же самое о своем редакторе? Заявляйте смело. Попробуйте открыть в MS-Word какой-либо документ со сложной разметкой. Скопируйте содержимое документа в своей редактор. Удивлены? Документ с большего сохранил свою разметку — и уже в вашем редакторе.
Да и картинки, которые были в исходном документе, тоже перенеслись. Только вот с картинками не все так просто, как хотелось бы. При сохранении документа они потеряются по той простой причине, что редактируемый HTML-документ содержит лишь ссылки на изображения, реально расположенные во временных папках вашего компьютера. Впрочем, первоначальный восторг подпортит еще и тот факт, что MS-Word версии 2000 и выше имеет скверную особенность передавать в буфер документ не в запрошенном HTML-формате, а в формате XHTML, что подразумевает просто безмерное описание каждого мало-мальского фрагмента форматирования документа. В результате XHTML-документ имеет реальный размер, в несколько раз превышающий исходный документ MS-Word. Очевидно, что когда видимые пара страниц текста реально занимают сотню килобайт, мало кто согласится ждать их загрузки с сервера в интернете.
Но все перечисленное на самом деле не проблемы, это — задачи, которые, соответственно, имеют решения. Содержание документа при сохранении мы можем «подчищать». Скажем, в PHP и Perl есть потрясающий механизм для подобного рода действий — функции регулярных выражений preg. Что же касается использования изображений в редактируемом документе, то стоит написать сервисную функцию, которая позволит пользователям самостоятельно добавлять в содержание изображения. Она же позаботится о предварительной загрузке (upload) изображений на сервер.
И если мы уже заговорили о сервисах, то не лишним будет заметить, что отсутствие в нашем редакторе столь привычной для офисных приложений «панели инструментов» вряд ли приведет в восторг пользователей. Так что вместо того, чтобы публиковать на странице редактора список «горячих» клавиш, давайте вообразим себя дизайнерами интерфейса, нарисуем и поместим ожидаемую «панель инструментов». «Кнопкам» этой панели мы самостоятельно назначим наиболее используемые команды форматирования.
Делается это следующим образом. Сначала мы назначаем объекту выделенную в редакторе область текста
var tr = frames.newTextArea.document.selection.createRange();
Далее выполняем над данной областью команду форматирования
Теперь восстанавливаем выделение, возвращаемся в документ.
tr.select(); frames.newTextArea.focus();
Наиболее часто используются команды:
Italic — наклонный шрифт
Underline — подчеркивание
JustifyLeft — левое выравнивание
JustifyCenter — центровка по центру
JustifyRight — правое выравнивание
InsertOrderedList — ненумерованный список
InsertUnorderedList — нумерованный список
Возможны комбинированные команды:
tr.execCommand('FontSize', false, '3'); tr.execCommand('FontName', false, 'Verdana'); Итак, если собрать рекомендации данной статью воедино, самое меньшее, что мы получим:
Теперь вам понадобится толика знаний HTML и Java-script, огромное желание удивить мир, и вы его наверняка удивите. По крайней мере, ваши новоиспеченные гостевые книги наполнятся симпатичными сообщениями благодарных посетителей.
Дмитрий ШЕЙКО,
студия веб-разработок НТЦ "АТЛАС",
sheiko.belsl.com
Делаем свой текстовый редактор с автосохранением
Сделать собственный текстовый редактор гораздо проще, чем кажется. Сейчас мы соорудим такой, и вы сами в этом убедитесь.
В этой статье мы соберем текстовый редактор, который будет работать в браузере. В помощь нам три технологии:
- JavaScript — язык, на котором всё будет работать. Это не лучший язык для полноценных приложений, но с ним вы сможете запрограммировать текстовый редактор прямо в браузере.
- Contenteditable — возможность языка HTML делать какие-то части страницы редактируемыми. Обычно со страницы можно только читать, но благодаря этому свойству можно еще и писать.
- Localstorage — особая область памяти, которая позволяет сохранить что-нибудь для конкретной страницы в браузере. Ваш браузер будет помнить, что вы ввели конкретно в этой странице. Это самая интересная часть.
Общая идея
У нас будет HTML-страница, на ней будет блок, похожий на лист бумаги. У него будет включен content editable, то есть внутри этого блока можно будет что-то писать. После каждого нажатия клавиши содержимое этого блока будет записываться во внутреннюю память браузера.
Вторая часть алгоритма — при загрузке страницы взять из памяти тот текст, что там был раньше, и показать его в нашей текстовой области. Страницу можно обновлять как угодно и даже выключать компьютер — текст всё равно останется в памяти.
Если записать алгоритм кратко, то он будет выглядеть так:
- Достаём из памяти тот текст, который там был
- Выводим его в нашу область для редактирования
- Постоянно смотрим, нажата ли какая-нибудь клавиша
- Если нажата — сразу записываем изменения в память.
Пункты 3 и 4 выполняются непрерывно до тех пор, пока вы не закроете страницу.
Готовим каркас
Пойдём уже привычным способом и создадим новый HTML-файл, в котором будут прописаны все нужные блоки. Мы так уже делали в статьях про генератор паролей и спортивный таймер.
Сохраняем как html-файл, открываем его в браузере и видим пустой экран. Это нормально, сейчас будем наполнять.
Расставляем содержимое
Нам нужен только заголовок, который объяснит нам, где мы находимся, и большое пространство для ввода текста. За текстовое поле будет отвечать блок со свойством contenteditable. Это свойство разрешает редактировать текст в блоке как угодно.
Текстовый редактор с автосохранением
Настраиваем стили
Стили задают внешний вид страницы и любых элементов на ней. Сделаем наш заголовок опрятнее:
/*задаём общие параметры для всей страницы: шрифт и отступы*/ body < text-align: center; margin: 10; font-family: Verdana, Arial, sans-serif; font-size: 16px; >/*закончили со стилями*/ Сохраняем, обновляем и смотрим на результат:
Пишем скрипт
Теперь нужно научить редактор сначала извлекать из памяти прошлый текст, а потом снова запоминать каждое нажатие клавиши. Всё будем делать через localStorage, как с ним работать — рассказываем в статье про список задач.
// если в нашем хранилище уже что-то есть… if (localStorage.getItem('text_in_editor') !== null) < // …то отображаем его содержимое в нашем редакторе document.getElementById('editor').innerHTML = localStorage.getItem('text_in_editor'); >// отслеживаем каждое нажатие клавиши и при каждом нажатии выполняем команду document.addEventListener('keydown', function (e) < // записываем содержимое нашего редактора в хранилище localStorage.setItem('text_in_editor', document.getElementById('editor').innerHTML); >);Кладём это в раздел и смотрим, что получилось:
Общий код страницы
Текстовый редактор с автосохранением
В следующих сериях
Сделаем нашему редактору приличный внешний вид — чтобы был похож на лист бумаги с тенью.
Добавим возможность менять документы и создавать новые.
Добавим каждой заметке заголовок.
Подписывайтесь на наши соцсети, и как только выйдет новая версия, мы вам расскажем.
В «Яндекс Практикуме» можно стать разработчиком, тестировщиком, аналитиком и менеджером цифровых продуктов. Первая часть обучения всегда бесплатная, чтобы попробовать и найти то, что вам по душе. Дальше — программы трудоустройства.