|
|||||||||
Автор: Andrew Golovin Сколько бы не ругали программное обеспечение от Microsoft, я буду считать, что Internet Explorer является самым мощным инструментом просмотра страниц. Кроме того, в поставку IE входят так называемые Reusable Components. Т.е. компоненты, которые выполняют некоторые специфические для Интернет функции, но разработчики могут использовать их в своих приложениях. Для того, чтобы эти компоненты работали, достаточно, чтобы в системе был установлен Internet Explorer. Один из примеров применения данных возможностей является режим Design View в редакторе Home Site. В данном режиме возможно редактирование HTML-кода с одновременным его просмотром. Возникает законный вопрос: если IE содержит такой компонент, то почему его нельзя использовать и в самом IE? Оказывается можно! Любой документ (элемент document в объектной модели) имеет свойство designMode. И, если установить его значение в "On", то случается чудо! Этот документ становится, практически, полноценным визуальным редактором HTML! Но данный редактор, на данном этапе, не обладает, почти никакой функциональностью. Он позволяет вводить текст, производить операции Редактирования/Вставки, просматривать исходный текст и вставлять в текст изображения. Но функциональность эта не отсутствует, она, просто не используется. А реализуется ее использовании с помощью метода execCommand(). Это метод элемента типа range. Элемент range можно создать для любого выделенного текста (даже, если этот текст пуст). Создается данный элемент методом createRange(), который является методом элемента selection документа. Создадим элемент, который будет содержать редактор. Лучше всего использовать для этого элемент <IFRAME>. Например, вот такой: <IFRAME FRAMEBORDER="1" ID="editorFrame"> </IFRAME> Теперь достаточно выполнить следующую строчку кода, чтобы преобразовать его в полноценный редактор: document.frames["editorFrame"].document.designMode = "On"; На самом деле, я использовал больше, чем одну строчку кода: editor = document.frames["editorFrame"].document; editor.designMode = "On"; editor.open(); editor.write("<H2>Edit this text</H2>"); editor.close(); Переменная editor нам понадобится позже, а запись текста в документ можно и не использовать (никаких других способов задать начальное содержимое редактора нет). Напомню, что в редакторе мы можем работать с выделенным текстом. Кроме операций редактирования/вставки, мы можем вставлять преобразовывать обычный текст в полужирный (выделенный текст будет помещен в тэги <STRONG></STRONG>), наклонный, задавать цвет фона, цвет текста и многое другое. Полное описание возможностей данного компонента можно найти на сайте разработчиков Microsoft или на компакт-диске, прилагаемом к книге "Dynamic HTML", которую можно приобрести в сетевом магазине "Озон".
В общем случае процедура вызова выглядит так: // Создаем объект range, содержащий выделенный // в редакторе текст. var range = editor.selection.createRange(); range.execCommand(команда,интерфейс,значение); Здесь команда - имя выполняемой команды, интерфейс - необязательный логический (true/false) параметр, который отвечает за вывод пользовательского интерфейса команды (если таковой имеется), если данный параметр опущен, то его значение будет равно false. значение - необязательный параметр, указывающий дополнительные значения для команды. Например выделение текста полужирным шрифтом производится следующим образом: var range = editor.selection.createRange(); range.execCommand("Bold"); Выполнять команды можно кнопками, которым назначены функции выполнения комманд. Есть некоторая трудность, заключающаяся в том, что если в редакитруемом документе ничего не выделено, то стандартные функции не производят никаких действий, так как объект range пуст. А хотелось, чтобы при нажатии на кнопку происходила вставка открывающего и закрывающего тэгов, а курсор затем устанавливался между ними. Делается это с помощью следующих действий (они должны выполнятся только, если выделения не было): 1: range.pasteHTML(" "); 2: range.moveStart("character", -1) 3: range.select(); 4: r = range.execCommand(command,interf,value); 5: range.text = ""; Рассмотрим данный код построчно. В строке 1 происходит вызов метода pasteHTML. Данный метод осуществляет вставку HTML-кода в редактируемый фрагмент. Кстати, код может быть любой и с помощью данного метода можно автоматизировать вставку сложных конструкций, поместив их на одну кнопку. В данном случае, в выделенном фрагменте появится сивол неразрывного пробела. Строка 2. Метод moveStart(ед.изм.,количество) осущетвляет перенос внтуреннего указателя элемента range на указанное количество "единиц измерения". Необходимо заметить, что в момент создания объекта range, внутренний указатель находится на том месте, где находился курсор, например: Несколько слов в редакторе ^ - положение внутреннего указателя до выполнения метода moveStart Несколько слов в редакторе ^ ^ | +-- конечный указатель +------- начальный указатель после вызова метода moveStart("word",-1) Таким образом, после строки 2, внутренние указатели объекта range будут расположены перед и после вставленного ранее неразрывного пробела. В следующей строке (3) вызывается метод select(), который осуществляет выделение фрагмента между внутренними указателями. После этого могут быть применены функции выполнения комманд. Например, если применить команду execCommand("Bold") (строка 4), то результатом будет следующий HTML-код: <STRONG> </STRONG> Теперь необходимо "убрать" неразрывный пробел, который мы вставили. Для этого я использовал свойство элемента range text. Данное свойство содержит текст, содержащийся в объекте range без HTML-тэгов. Свойство это доступно, как для чтения, так и для записи. Присвоив ему пустую строку (строка 5), мы избавимся от ненужного неразрывного пробела. Таким образом, в результате работы данного кода в редактируемый документ будет добавлена конструкция: <STRONG></STRONG> А курсор будет расположен между открывающим и закрывающим тэгом. Вы спросите, как определить, что пользователь ничего не выделил в редактируемом документе? Делается это с помощью уже знакомого нам свойства text. Вот такой конструкцией: if (range.text.length > 0) { // Что-то выделено. } else { // Ничего не выделено. } Напомню, что в случае, если пользователь выделил, что-то в документе, то команда должна выполняться напрямую, без дополнительных манипуляций с объектом range. Кроме того, что IE предоставляет нам возможность изменения содержания редактируемого докумена с помощью команд, появляются дополнительные пункты в контекстном меню (вызываемое по нажатию правой клавиши мыши). Эти пункты: просмотреть исходный код, вставить изображение и другие. Еще одной полезной функцией является возможность изменять размеры объектов, как в обычном редакторе, с помощью "ручек", расположенных по краям объектам. Помните, что размеры текста так изменить нельзя. Еще хочу остановиться на том, что весь исходный текст отредактированного документа можно получить с помощью свойства innerHTML. Например, вот так: editor.innerHTML. А текст без HTML-элементов: editor.innerText Практическое применение данного компонента можно посмотреть на странице www.siteexperts.com в форумах. Российские разработчики (например Индивид) используют данный компонент в своих разработках для редактирования контента сайтов необученным пользователям (например разработка компании Индивид под названием "Сайтистика"). И последнее на сегодня замечание: если вы будете использовать этот компонент для создания публично доступных сервисов (гостевые книги, форумы и пр.), то уделяйте как можно больше внимания проблемам безопасности, так как существует возможность передать, что-то, например, в форум, в обход вашей страницы. А в передаваемое может быть включен код на языке PHP. Поэтому выполняйте следующие действия обязательно: В обработчике проверьте откуда были получены данные, уберите все "опасные" тэги (я предпочитаю, просто, оставить необходимые: <STRONG>, <U>, <I> и некотрые другие), при вставке изображений обязательно проанализируйте, является это изображение "чсетным" или скриптом, генерирующим изображение, а еще лучше, запретите вставку изображений в текст сообщения. Ну и перейдем к примерам: Загрузить файл примера editor.zip
Автор: Andrew Golovin
|
|||||||||
![]() |
![]() |