Delphi World - это проект, являющийся сборником статей и малодокументированных возможностей  по программированию в среде Delphi. Здесь вы найдёте работы по следующим категориям: delphi, delfi, borland, bds, дельфи, делфи, дэльфи, дэлфи, programming, example, программирование, исходные коды, code, исходники, source, sources, сорцы, сорсы, soft, programs, программы, and, how, delphiworld, базы данных, графика, игры, интернет, сети, компоненты, классы, мультимедиа, ос, железо, программа, интерфейс, рабочий стол, синтаксис, технологии, файловая система...
Визуальный HTML редактор своими руками

Автор: Samum
WEB-сайт: http://samum2000.narod.ru

Итак, что нам понадобится. В первую очередь - Delphi 5-7 (у меня стоит 7-я версия, и весь код тестировался именно в этой версии). Это вызвано тем, что компонент TWebBrowser впервые "прописался" на вкладке Internet именно в 5-й версии (в 4-й его надо было устанавливать как компонент ActiveX). Еще необходимо, чтобы в системе был установлен Internet Explorer 4 и выше.

Сначала нам надо перевести WebBrowser в режим редактирования. Для этого у каждого документа (согласно объектной модели это document) существует свойство DesignMode. Если установить его в 'On', то наша компонента автоматически переключается в режим редактирования, а если установить его в 'Off', то компонент вернется в режим просмотра.

Проверим это! Создадим новую форму, разместим на ней компоненту TWebBrowser и несколько компонент TSpeedButton. Затем напишем такой код:

unit main;

interface
...

var
  Form1: TForm1;
  Disp: IDispatch;
  Editor: IHTMLDocument2;

implementation

{$R *.dfm}

procedure TForm1.WebBrowser1DocumentComplete(Sender: TObject;
  const pDisp: IDispatch; var URL: OleVariant);
var
  CurrentWB: IWebBrowser;
  Editor: IHTMLDocument2;
begin
  Disp := pDisp;
end;

procedure TForm1.SpeedButton1Click(Sender: TObject);
var
  CurrentWB: IWebBrowser;
begin
  CurrentWB := Disp as IWebBrowser;
  editor := (CurrentWB.Document as IHTMLDocument2);
  editor.DesignMode := 'On';
end;

procedure TForm1.FormCreate(Sender: TObject);
begin
  WebBrowser1.Navigate('about:<html><body></body></html>');
end;

Теперь по порядку о том, что мы написали. В событии OnCreate формы мы загружаем в браузер простую страницу (напомню, что протокол about: позволяет загружать в браузер HTML строку). Это необходимо для того, чтобы в последующем мы могли обращаться к документу. Сразу после этого будет вызван обработчик события OnDocumentComplete. Но пока еще ничего не произошло. Внимательный читатель мог обратить внимание, что для перевода браузера в режим редактирования надо нажать кнопку 1. Editor - это экземпляр нашего документа (document). Его свойство DesignMode устанавливается в 'On'. Теперь наш редактор практически готов. Он уже умеет править текст, копировать/вырезать/вставлять текст и картинки, делать текст жирным/подчеркнутым/наклонным. Для этого есть соответствующие комбинации клавиш.

  • Ctrl + C Копировать
  • Ctrl + X Вырезать
  • Ctrl + V Вставить

  • Ctrl + B Жирный текст
  • Ctrl + I Наклонный текст
  • Ctrl + U Подчеркнутый текст

  • Ctrl + Z Отменить
  • Ctrl + Y Повторить
  • Ctrl + K Гиперссылка

  • Ctrl + F Найти
  • Ctrl + A Выделить всё
  • Ctrl + Left-Click Выделить блок

"Это, конечно, хорошо, что есть горячие клавиши, но мне не хотелось бы все их запоминать" - можете сказать вы. Хорошо. Тогда давайте разберем, как из Delphi заставить WebBrowser выполнять все эти действия. Для этого есть метод execCommand интерфейса IHTMLTxtRange (он описан в модуле MSHTML_TLB). Рассмотрим простой пример.

procedure TForm1.SpeedButton2Click(Sender: TObject);
var
  Range: IHTMLTxtRange;
begin
  Range := (editor.selection.createRange as IHTMLTxtRange);
  Range.execCommand('bold', false, emptyparam)
end;

Сначала в этой процедуре создается объект Range. После этого вызывается метод execCommand:

function execCommand(cmdID: WideString; ShowUI: WordBool;
  Value: OleVariant): wordbool;

cmdID – это строка идентификатор команды (в нашем примере 'bold' заставляет редактор переключаться между жирным и обычным начертанием текста); полный список команд смотри в приложении.

ShowUI – Show User Interface - показывать интерфейс пользователя (если таковой имеется, как правило это различные диалоговые окна). Если параметр равен False, то команда выполняется без предупреждения.

value – содержит дополнительную информацию в зависимости от команды.

Несколько слов об объекте Range. Помимо уже знакомого нам execCommand этот объект обладает еще рядом свойств и методов, некоторые из которых сейчас рассмотрим.

Text - Содержит текст выделения (без тегов HTML)
HTMLText - Полный текст выделения

moveStart(const unit_: widestring; count: integer)

- procedure - Перемещает начальную позицию выделения на count символов вправо (если count<0, то влево), unit_-единицы измерения смещения (чаще всего используется 'character': 1 символ). При этом конечная позиция не смещается.

moveStart(const unit_: widestring; count: integer)

То же самое, только для конечной позиции выделения.

PasteHTML(const html: widestring);

Вставляет HTML-строку

execCommandShowHelp(cmdID: widestring); 

Отображает помощь по команде, указанной в cmdID

Пожалуй, на сегодня всё. Об остальных объектах (картинки, таблицы, элементы управления) поговорим в другой раз. Будут вопросы - пишите: mailto:samum2000@mail15.com?subject=Question about visualhtml part1.

Приложение. Доступные команды

  • BackColor - Устанавливает или получает цвет фона текущего выделения. Value должно содержать имя цвета или его шеснадцитиричный RGB эквивалент (например, #FFCC00).
  • Bold - Переключает начертание текста текущего выделения между полужирным и нормальным.
  • Copy - Копирует выделение в буфер обмена
  • CreateBookmark - Получает имя якоря или создает его для текущего выделения. Value - строка, содержащая имя якоря.
  • CreateLink - Получает URL ссылки или создает новую ссылку. Параметр Value должен содержать URL.
  • Cut - Вырезает текущее выделение в буфер обмена.
  • Delete - Очищает текущее выделение (удаляет всё его содержимое).
  • Find - Находит текст, заданный в параметре Value в текущем выделении.
  • FontName - Устанавливает шрифт для текущего выделения. Value содержит описание этого шрифта (как в теге FONT).
  • FontSize - Устанавливает размер шрифта. Value - число от 1 до 7 включительно.
  • ForeColor - Устанавливает цвет текста. Value должно содержать имя цвета или его шеснадцитиричный RGB эквивалент (например, #FFCC00)
  • FormatBlock - Устанавливает или получает форматирование текущего блока. Value может содержать теги-описатели.
  • Indent - Увеличивает отступ выделенного текста на одну единицу приращения
  • InsertButton - Перезаписывает идентификатор кнопки вместо текущего выделения. Value - строка, содержащая идентификатор кнопки.
  • InsertFieldset - То же для поля ввода.
  • InsertHorizontalRule - То же для горизонтальной полосы.
  • InsertIFrame - То же для встроеных фреймов (IFRAME).
  • InsertImage - То же для изображений.
  • InsertInputButton - То же для кнопки.
  • InsertInputCheckbox - То же для чекбоксов (checkBox).
  • InsertInputFileUpload - То же для элемента выбора файла.
  • InsertInputHidden - То же для скрытого поля (hidden)
  • InsertInputImage - То же для изображения.
  • InsertInputPassword - То же для поля ввода пароля.
  • InsertInputRadio - То же для радио-кнопок (Radio)
  • InsertInputReset - То же для кнопки reset.
  • InsertInputSubmit - То же для кнопки Submit.
  • InsertInputText - То же для поля ввода текста.
  • InsertParagraph - Вставляет новый раздел (абзац).
  • InsertOrderedList - Переключает стиль текущего выделения между списком и простым текстом.
  • InsertUnorderedList - То же самое.
  • InsertSelectDropdown - Записывает элемент Drop-down вместо текущего выделения. Value должно содержать идентификатор элемента.
  • InsertTextArea - То же для элемента TextArea.
  • Italic - Переключает начертание текста текущего выделения между наклонным и обычным.
  • JustifyCenter - Устанавливает выравнивание по центру для всего блока, в котором расположено текущее выделение.
  • JustifyLeft - Устанавливает выравнивание по левому краю для всего блока, в котором расположено текущее выделение.
  • JustifyRight - Устанавливает выравнивание по правому краю для всего блока, в котором расположено текущее выделение.
  • Outdent - Уменьшает отступ для всего блока, в котором расположено выделение, на одну единицу.
  • OverWrite - Переключается между режимами вставки текста и замены текста при вводе. Value: true - замена, false - вставка.
  • Paste - Вставляет текст из буфера обмена вместо текущего выделения.
  • Refresh - Обновляет текущий документ.
  • RemoveFormat - Удаляет из текущего фрагмента все теги форматирования
  • SelectAll - Выделяет все содержимое документа.
  • UnBookmark - Удаляет все закладки из текущего выделения.
  • Underline - Переключает начертание текста текущего выделения между подчеркнутым и обычным.
  • Unlink - Удаляет все гиперссылки из текущего выделенного фрагмента.
  • Unselect - Снимает выделение.
Проект Delphi World © Выпуск 2002 - 2024
Автор проекта: USU Software
Вы можете выкупить этот проект.