Я решил написать эту статью, как бы вспоминая свою молодость. Это было давно - на заре Новой Эры Инета :) использования браузеров в инете. Как то копаясь в патрохахх всеми известного браузера IE я обратил внимание на одно интересное свойство объекта DOCUMENT. Это свойство - designmode
В оффициальной документации по браузеру , в то время об этом свойстве не было сказано - ни-чего. Вот я и решил по-экспериментировать с ним. Исходно это свойство всегда имело значение false. Я в скрмпте установил его в известное всем true, и вот тут мне и пришло это откровение. Браузер из просто-вьювера превратился в оригинальный редактор!!!
Имено этим свойством пользуют разработчики tyni-MSIE, который используется в WP и других системах в качестве основного редактора, для набора статьи. Если взглянуть на скрипт этого гаджета WP - то все килобайты крутятся вокруг сервиса простой установки свойства disignmode в активный режим. Позже в теле движка WP появилась и еще одна разработка , касающаяся этого же свойства - пакет codepress, но ее реаллизация так же оставляет желать лучшего. Ибо много написано - а сути нуль. Вот чтобы моему читателю было бы понятно, что и как конкретно делает с браузером свойство документа - disignmode, я и решил посветить ему несколько статей, материалы которых я обобщил из своих старых публикаций.
Итак начнем с самого простого. Это какие теги мы можем использовать в качестве опоры для нашего HTML-редактора. В принципе это свойство работает в любых визуальных тегах, но полное его представление с возможностью устновки и клонировании любых свойств браузера будет работать в тегах имеющих свойства окна браузера. К таким тегам относятся - сам докумет (верхнее окно) или любой frame. Наиболее подходящий тэг для этих изысканий, это iframe, который свободно может быть применен в любой точке докумена, без каких либо ограничений.
Итак для начала приведем наиболее интересные, для нас, аттрибуты этого тэга.
<IFRAME
frameborder=no | yes | 0 | 1
noresize=noresize | resize
scrolling=auto | no | yes
SRC=url
>
А так же задаются ширина и высота будушего редактора. К примеру все примеры на этом сайте используют имено тэг iframe, через который выдаются в статью их отображение.
Сразу возникает вопрос каким образом испоьзовать набраный текст для передачи на сервер , ибо тэг не входит в допустимый набор тэгов для FORM, в качестве источника данных. Эта проблема решается достаточно просто. Нужно в момент субмита, содержимое ifame скопировать в любой форм-тэг. Лучшим для этих целей подходит хидден-инпут.
<input type="hidden" />
Теперь рассмотрим вопрос - каким способом внедрять наш редактор в документ. В принципе есть два алгоритма для нашей реаллизации. Это вариант создания нового iframe на сторне клиента скриптами в том месте где он желает, или передача синтезированого редактора с сервера. В обоих случаях можно воспользоваться атрибутом SRC (источник), в качестве дополнительнго канала для редактируемой информации, через дополнительный канал связи на сервере.
<iframe src='/edit.php' ></iframe>
Как только будет установлен коннект, во фрэйм будет передано содержимое сформированое отдельным серверным скриптом. Этот прием позволяет разгрузить основной движок от задач редактирования в онлайн, и тем самым сократить его код, сделав его более эффективным, в тех случаях, когда нас более всего интересует содержимое статьи , а не дискус по ней.
После того как содержимое фрэйма будет заполнено и он сам создан, необходимо скриптом перевести его в редактируемый режим. Этот режим в разных браузерах включается по разному.
В основном сейчас наиболее популярны браузеры на двух движках - от Microsoft и Gecko. Причем браузер IE до версии 6+ использовал тот же способ , что и использует движок Gecko (браузеры FireFox, Opera), а имено установки в true свойства designmode
editor.designmode = 'on'
В браузере IE 6+ от Microsot, используется другое специальное свойство - contentEditable
editor.contentEditable = true
Вот в принципе и все. В будущем я постараюсь опубликовать полный текст редактора- HTML, который я использую в своих разработках, заменяя "тяжелый" и вовсе не Tyni-MSIE, а так же кандовый codepress. Но это будет в будущем. А сейчас я приведу здесь только простой пример будущего редктора, в качестве возможности просмотра реаллизации моментов, рассказных выше в статье
