Здравствуйте, уважаемые читатели XoZbloga! В этой статье расскажу Вам о wysihtml5 — текстовом редакторе для сайта с открытым исходным кодом. wysihtml5 использует сложные концепции безопасности и стремится создать правильную и чистую разметку HTML5, предотвращая добавление ненужных тегов и встроенных стилей, которыми так часто грешат другие текстовые редакторы. В тоже время очень быстрый и легкий в работе. Поддерживается даже речевой ввод для Chrome! Одним словом хороший текстовый редактор, который можно настроить для своих нужд!
Советую сразу скачать исходники с github, я качал последнюю версию 0.3.0 там в архиве есть папочка website с аналогичным редактором как в демо. Просто так сразу будет наглядней. Предлагаю просто рассмотреть как же просто подключается и настраивается wysihtml5.
Шаг 1: Подключение скриптов
Для начала использования данного текстового редактора скачиваем исходные файлы, создаем отдельную директорию на своем сайте (например path-to-wysihtml5), и заливаем их туда. После в той странице где намечается присутствие редактора подключаем 2 файла:
1 2 3 4 | <!-- wysihtml5 анализатор правил --> <script src="path-to-wysihtml5/parser_rules/advanced.js"></script> <!-- Библиотека --> <script src="path-to-wysihtml5/dist/wysihtml5_0.3.0.min.js"></script> |
Шаг 2: Создание тулбара (кнопок)
Теперь можно наладить кнопки редактора. Достаточно большой выбор различных команд форматирования текста. Вот полный список, и способ их настройки. Тулбар должен иметь свой идентификатор, чтобы можно было настроить доступ для JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <div id="wysihtml5-toolbar" style="display: none;"> <a data-wysihtml5-command="bold">bold</a> <a data-wysihtml5-command="italic">italic</a> <!-- Некоторые команды wysihtml5 требуют дополнительные параметры --> <a data-wysihtml5-command="foreColor" data-wysihtml5-command-value="red">red</a> <a data-wysihtml5-command="foreColor" data-wysihtml5-command-value="green">green</a> <a data-wysihtml5-command="foreColor" data-wysihtml5-command-value="blue">blue</a> <!-- Некоторые команды wysihtml5 такие как создание ссылки требуют дополнительных параметров (например href) --> <a data-wysihtml5-command="createLink">Создать ссылку</a> <div data-wysihtml5-dialog="createLink" style="display: none;"> <label> Ссылка: <input data-wysihtml5-dialog-field="href" value="http://" class="text"> </label> <a data-wysihtml5-dialog-action="save">OK</a> <a data-wysihtml5-dialog-action="cancel">Cancel</a> </div> </div> |
Шаг 3: Создание текстовой области (textarea)
Все, теперь уже можно и текстовую область вставить, которую wysihtml5 преобразует в текстовый редактор. Область должна иметь свой идентификатор, чтобы можно было настроить доступ для JavaScript:
1 | <form><textarea id="wysihtml5-textarea" placeholder="Введите текст и отредактируйте его..." autofocus></textarea></form> |
Шаг 4: Инициализация редактора
Здесь мы отмечаем в качестве параметров id текстовой области и панель с кнопочка (тулбар). Однако есть и .
1 2 3 4 5 6 | <script> var editor = new wysihtml5.Editor("wysihtml5-textarea", { // id текстовой области toolbar: "wysihtml5-toolbar", // id тулбара parserRules: wysihtml5ParserRules // включает анализатор правил }); </script> |
Вот так вот интегрируется wysihtml5. Теперь «если что» буду им пользоваться. Понравился ли Вам этот редактор? Может Вы знаете подобные текстовые редакторы, оставляйте комментарии!
Чтобы оставаться в курсе свежих статей и уроков подписывайтесь на страницу ВКонтакте или подпишитесь на почтовую рассылку. Если статья Вам понравилась сделайте пожалуйста tweet или like — поделитесь с друзьями 🙂 Спасибо за прочтение. До связи!
P.S.: Энергосбережение все глубже входит в нашу повседневную жизнь. Одним из основных направлений в области сбережения электроэнергии является освещение жилых домов. Тут Вы сможете найти подходящие светодиодные лампы для дома. Большой выбор, доступные цены и доставка по всей России.
Источник статьи/урока: https://xozblog.ru