JavaScript. Визуальные редакторы

Description

Подавляющее большинство ныне действующих сайтов сделано при помощи CMS. А такие системы невозможно представить без визуальных редакторов страниц. WYSIWYG редакторы позволяют администратору управлять содержимым ресурса, не будучи знакомым даже с азами про-граммирования. Многие разработчики используют не готовые CMS, а пишут собст-венные. Данная книга призвана помочь им в этом непростом деле. На ее страницах описаны четыре WYSIWYG редактора – на разный вкус и для разных задач. Все системы являются оригинальными и не содержат каких-либо заимствований кода. Функциональные возможности приведенных разработок имеют исчерпывающие описания и разъяснения. Разобранные в книге визуальные редакторы могут быть интегрированы в уже существующую CMS или работать напрямую с сайтом без сопут-ствующих инструментов. Особо надо отметить, что эти редакторы позволяют администратору сайта видеть, как будет выглядеть страница еще до того, как он запишет внесенные изменения в файл или базу данных. Книга имеет сайт поддержки, где читатель может ознакомиться с редакторами и опробовать их в действии. Кроме того, вы можете скачать zip-архив со всеми файлами и запустить их на своем компьютере. Для этого книга содержит подробные инструкции по созданию локального хостинга на ПК. Рекомендовано в качестве дополнительной литературы для студентов, обучающихся в средних профессиональных учебных заведениях по направ-лению «Информатика и вычислительная техника». 1. Введение 1.1. О чем эта книга 1.2. Особенности изложения материала 1.3. Оформление сценариев 2. Прежде чем начать 2.1. CMS 2.2. WYSIWYG 2.3. Атрибут contentEditable 2.4. Свойство designMode 2.5. Метод getSelection 2.6. Отменен ли execCommand? 2.7. Методы createElement и surroundContents 2.8. Что и как мы напишем 3. Среда разработки 3.1. Выясняем разрядность ОС 3.2. Установка пакета Visual C++ 3.3. Установка сервера Apache 2.4 3.4. Установка PHP 8 3.5. Установка редактора Notepad++ 8 4. Тестирование программ 4.1. Тестирование сайта и редакторов в браузерах 4.2. Тестирование сайта и редакторов в валидаторах 4.3. Проверка работы сайта и редакторов в консоли 5. Структура проекта 5.1. Состав zip-архива 5.2. Сайт 5.3. Редакторы 6. Сборка демонстрационного сайта 6.1. Пишем заготовку 6.2. Файл таблицы стилей 6.3. Файл со сценариями 6.4. Дизайн сайта 6.5. Выделяем редактируемую область 6.6. Подключаем PHP 7. Структура редакторов 7.1. Пишем заготовку 7.2. Файл таблицы стилей 7.3. Файл со сценариями 7.4. Добавляем фрейм для просмотра страницы 7.5. Дизайн редакторов 7.6. Подключаем PHP 8. Базовые компоненты редакторов 8.1. WYSIWYG и текстовый режимы 8.2. Главная панель 8.3. Кнопки простого редактирования 8.4. Блок настроек линий 8.5. Блок настроек таблиц 8.6. Блок настроек рисунков 8.7. Блок настроек фреймов 8.8. Блок выбора символов 8.9. Блок настроек ссылок 8.10. Блок настроек заголовков 8.11. Блок настроек выравнивания текста в абзацах 8.12. Блок настроек шрифтов 8.13. Блок настроек цвета текста 8.14. Удаление форматирования и ссылки 9. Общие фрагменты сценариев 9.1. Регистрация «главного» обработчика 9.2. Выбор загружаемой страницы 9.3. Взаимодействие области контента, WYSIWYG и текстового редакторов 9.4. Фиксация в памяти выделенного фрагмента 9.5. Открытие и закрытие вкладок с настройками 9.6. Выбор рисунка 9.7. Навигация по внесенным изменениям 9.8. Запись отредактированной страницы 10. Традиционный редактор 10.1. Включение режима редактирования 10.2. Копирование текста 10.3. Удаление форматирования и ссылок 10.4. Простое редактирование текста 10.5. Изменение цвета букв или фона текста 10.6. Добавление разметки маркированного списка 10.7. Вставка линии 10.8. Вставка фрейма 10.9. Вставка рисунка 10.10. Вставка таблицы 10.11. Вставка символов 10.12. Добавление ссылки 10.13. Добавление заголовка 10.14. Выравнивание абзаца 10.15. Настройка шрифта 11. Редактор с фиксированными стилями 11.1. Установка режима редактирования 11.2. Копирование текста 11.3. Удаление форматирования и ссылок 11.4. Простое редактирование текста 11.5. Изменение цвета букв или фона текста 11.6. Добавление разметки маркированного списка 11.7. Вставка линии 11.8. Вставка фрейма 11.9. Вставка рисунка 11.10. Вставка таблицы 11.11. Вставка символов 11.12. Добавление ссылки 11.13. Добавление заголовка 11.14. Выравнивание абзаца 11.15. Настройка шрифта 12. Креативный редактор 12.1. Файлы редактора и сайта 12.2. Включение режима редактирования 12.3. Открытие и закрытие HTML-редактора 12.4. Взаимодействие HTML-редактора и области контента 12.5. Копирование текста 12.6. Удаление форматирования и ссылок 12.7. Простое редактирование текста 12.8. Изменение цвета букв или фона текста 12.9. Добавление разметки маркированного списка 12.10. Вставка линии 12.11. Вставка фрейма 12.12. Вставка рисунка 12.13. Вставка таблицы 12.14. Вставка символов 12.15. Добавление ссылки 12.16. Добавление заголовка 12.17. Выравнивание абзаца 12.18. Настройка шрифта 12.19. Перемещение панели 13. Ретро-редактор 13.1. Установка режима редактирования 13.2. Простое редактирование текста 13.3. Изменение цвета букв или фона текста 13.4. Вставка линии 13.5. Вставка фрейма 13.6. Вставка рисунка 13.7. Вставка таблицы 13.8. Вставка символов 13.9. Добавление ссылки 13.10. Добавление заголовка 13.11. Выравнивание абзаца 13.12. Настройка шрифта 14. Файл записи данных 14.1. Заглушка 14.2. Рабочий файл 15. Подведем итоги