Я@R

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » Я@R » Претечи » Редактирование в браузере


Редактирование в браузере

Сообщений 1 страница 5 из 5

1

Я решил написать эту статью, как бы вспоминая свою молодость. Это было давно - на заре Новой Эры Инета :) использования браузеров в инете. Как то копаясь в патрохахх всеми известного браузера IE я обратил внимание на одно интересное свойство объекта DOCUMENT. Это свойство - designmode

2

В оффициальной документации по браузеру , в то время об этом свойстве не было сказано - ни-чего. Вот я и решил по-экспериментировать с ним. Исходно это свойство всегда имело значение 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, через который выдаются в статью их отображение.

3

Сразу возникает вопрос каким образом испоьзовать набраный текст для передачи на сервер , ибо тэг не входит в допустимый набор тэгов для 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. Но это будет в будущем. А сейчас я приведу здесь только простой пример будущего редктора, в качестве возможности просмотра реаллизации моментов, рассказных выше в статье

4

Теперь мы расскажем как заставить наш редактор вставлять элементы или текст извне по исполнению скрипта. К примеру тебе нужно сделать часть введеного текста в инлайн или жирным или италийским, или вставить просто горизонтальную линию, скопировать и закопипастить.

Для того чтобы к примеру сделать текст набраный жирным, нужно выполнить некоторую команду, которую исходно была предопределена в браузере для этой цели. У разных браузерах команды исполняемые разные, но основной набор все же исполняется. Чтобы определить какие команды исполняются браузером лучше всего выполнить следующий скрипт

Код:
function cm_exe(c,a){
    if(edom.queryCommandSupported(cm))
      edom.execCommand(cm,false,arg);
    else insElm(cm,arg);
  }

**здесь с- команда; а- ее аргумент.
Если команда не входит в допустимый набор, то управление передается специальному скрипту, который может либо исполнить дополнительный набор, типа ввода специальной группы тэгов, либо просто выдать кваллифицированое сообщение об ошибке. Полный перечень приводимых команд я приведу в коментах к этой статье

5

В связи с последними изменениями в ядре DOM, произошли изменения на исполнение метода execCommand(). Если раньше несуществующая команда вызывала исключительную ситуацию, то теперь она просто не исполняется. Это изменение может привести к неоднозначному поведению всем известного HTML-редактора TYNI MCE.
и теперь чтобы выянить поддерживается ли команда командером требуется проверить ее функцией queryCommandSupported(cm) и если результат - истина выполнять команду.


Вы здесь » Я@R » Претечи » Редактирование в браузере