Я решил написать эту статью, как бы вспоминая свою молодость. Это было давно - на заре Новой Эры Инета использования браузеров в инете. Как то копаясь в патрохахх всеми известного браузера IE я обратил внимание на одно интересное свойство объекта DOCUMENT. Это свойство - designmode
Редактирование в браузере
Сообщений 1 страница 5 из 5
Поделиться222.08.18 09:50
В оффициальной документации по браузеру , в то время об этом свойстве не было сказано - ни-чего. Вот я и решил по-экспериментировать с ним. Исходно это свойство всегда имело значение 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, через который выдаются в статью их отображение.
Поделиться322.08.18 09:50
Сразу возникает вопрос каким образом испоьзовать набраный текст для передачи на сервер , ибо тэг не входит в допустимый набор тэгов для 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. Но это будет в будущем. А сейчас я приведу здесь только простой пример будущего редктора, в качестве возможности просмотра реаллизации моментов, рассказных выше в статье
Поделиться422.08.18 09:50
Теперь мы расскажем как заставить наш редактор вставлять элементы или текст извне по исполнению скрипта. К примеру тебе нужно сделать часть введеного текста в инлайн или жирным или италийским, или вставить просто горизонтальную линию, скопировать и закопипастить.
Для того чтобы к примеру сделать текст набраный жирным, нужно выполнить некоторую команду, которую исходно была предопределена в браузере для этой цели. У разных браузерах команды исполняемые разные, но основной набор все же исполняется. Чтобы определить какие команды исполняются браузером лучше всего выполнить следующий скрипт
function cm_exe(c,a){ if(edom.queryCommandSupported(cm)) edom.execCommand(cm,false,arg); else insElm(cm,arg); }
**здесь с- команда; а- ее аргумент.
Если команда не входит в допустимый набор, то управление передается специальному скрипту, который может либо исполнить дополнительный набор, типа ввода специальной группы тэгов, либо просто выдать кваллифицированое сообщение об ошибке. Полный перечень приводимых команд я приведу в коментах к этой статье
Поделиться522.08.18 09:51
В связи с последними изменениями в ядре DOM, произошли изменения на исполнение метода execCommand(). Если раньше несуществующая команда вызывала исключительную ситуацию, то теперь она просто не исполняется. Это изменение может привести к неоднозначному поведению всем известного HTML-редактора TYNI MCE.
и теперь чтобы выянить поддерживается ли команда командером требуется проверить ее функцией queryCommandSupported(cm) и если результат - истина выполнять команду.