Текстовый редактор для сайта — wysihtml5

      HTML

Здравствуйте, уважаемые читатели XoZbloga! В этой статье расскажу Вам о wysihtml5 — текстовом редакторе для сайта с открытым исходным кодом. wysihtml5 использует сложные концепции безопасности и стремится создать правильную и чистую разметку HTML5, предотвращая добавление ненужных тегов и встроенных стилей, которыми так часто грешат другие текстовые редакторы. В тоже время очень быстрый и легкий в работе. Поддерживается даже речевой ввод для Chrome! Одним словом хороший текстовый редактор, который можно настроить для своих нужд!

Текстовый редактор - wysihtml5

Советую сразу скачать исходники с github, я качал последнюю версию 0.3.0 там в архиве есть папочка website с аналогичным редактором как в демо. Просто так сразу будет наглядней. Предлагаю просто рассмотреть как же просто подключается и настраивается wysihtml5.

Шаг 1: Подключение скриптов

Для начала использования данного текстового редактора скачиваем исходные файлы, создаем отдельную директорию на своем сайте (например path-to-wysihtml5), и заливаем их туда. После в той странице где намечается присутствие редактора подключаем 2 файла:

<!-- 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

<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:

<form><textarea id="wysihtml5-textarea" placeholder="Введите текст и отредактируйте его..." autofocus></textarea></form>

Шаг 4: Инициализация редактора

Здесь мы отмечаем в качестве параметров id текстовой области и панель с кнопочка (тулбар). Однако есть и другие параметры.

<script>
var editor = new wysihtml5.Editor("wysihtml5-textarea", { // id текстовой области
  toolbar:      "wysihtml5-toolbar", // id тулбара
  parserRules:  wysihtml5ParserRules // включает анализатор правил
});
</script>

Вот так вот интегрируется wysihtml5. Теперь «если что» буду им пользоваться. Понравился ли Вам этот редактор? Может Вы знаете подобные текстовые редакторы, оставляйте комментарии!

Чтобы оставаться в курсе свежих статей и уроков подписывайтесь на страницу ВКонтакте или подпишитесь на почтовую рассылку. Если статья Вам понравилась сделайте пожалуйста tweet или like — поделитесь с друзьями :) Спасибо за прочтение. До связи!

P.S.: Энергосбережение все глубже входит в нашу повседневную жизнь. Одним из основных направлений в области сбережения электроэнергии является освещение жилых домов. Тут Вы сможете найти подходящие светодиодные лампы для дома. Большой выбор, доступные цены и доставка по всей России.

Чтобы оставаться в курсе свежих статей и уроков подписывайтесь на еженедельную почтовую рассылку или на новостную ленту RSS. Спасибо!

  • Спасибо за пример. С удовольствием использую, но правда есть одна загвоздочка. у меня в форме несколько полей и в случае необходимости не могу стандартным методом очистить поле. Reset Form тут не прокатывает т.к. полей несколько, замена значения value тоже не прокатывает (только в том случае если выбран вид HTML в редакторе), :(((

    • Попробуйте так: создайте кнопку привязав к ней вот эту функцию
      function resetValue() { editor.clear(); } 
      editor — это переменная при инициализации как в примере… просто может у вас другая.

  • Спасибо за пример. С удовольствием использую, но правда есть одна
    загвоздочка. у меня в форме несколько полей и в случае необходимости не
    могу стандартным методом очистить поле. Reset Form тут не прокатывает
    т.к. полей несколько, замена значения value тоже не прокатывает (только в
    том случае если выбран вид HTML в редакторе), :(((