Описание тега wysihtml5

wysihtml5 - это редактор форматированного текста с открытым исходным кодом, основанный на технологии HTML 5 и подходе прогрессивного улучшения.

Он использует сложную концепцию безопасности и направлен на создание полностью допустимой разметки HTML 5, предотвращая появление неподдерживаемых тегов и встроенных стилей.

В Руководстве по началу работы объясняется, как легко интегрировать wysihtml5 на ваш сайт.

1. Включите скрипты

    <!-- wysihtml5 parser rules -->
    <script src="/path-to-wysihtml5/parser_rules/advanced.js"></script>
    <!-- Library -->
    <script src="/path-to-wysihtml5/dist/wysihtml5-0.3.0.min.js"></script>

• Первый сценарий содержит правила синтаксического анализатора html5, необходимые для wysihtml5 для создания действительной и желаемой разметки. Либо используйте один из " существующих наборов правил парсера ", либо создайте свой собственный. См. Подробности
  в " правилах парсера advanced.js ".
• Второй сценарий - это уменьшенная библиотека wysihtml5. Он находится в папке " dist " этого репозитория.

2. Создайте текстовое поле

    <form><textarea id="wysihtml5-textarea" placeholder="Enter your text ..." autofocus></textarea></form>

• wysihtml5 берет текстовое поле и преобразует его в редактор форматированного текста. Текстовое поле действует как резерв для неподдерживаемых браузеров (например, IE < 8). Убедитесь, что у элемента textarea есть идентификатор, чтобы позже мы могли легко получить к нему доступ из javascript. В результате редактор форматированного текста будет вести себя как текстовое поле, поскольку поведение (placeholder, autofocus,...) и стили css будут скопированы.

• Обратите внимание: текстовое поле всегда будет содержать разметку, созданную редактором. Поэтому wysihtml5 легко интегрируется с формами.

3. Создайте панель инструментов.

      <div id="wysihtml5-toolbar" style="display: none;">
        <a data-wysihtml5-command="bold">bold</a>
        <a data-wysihtml5-command="italic">italic</a>

        <!-- Some wysihtml5 commands require extra parameters -->
        <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>

        <!-- Some wysihtml5 commands like 'createLink' require extra paramaters specified by the user (eg. href) -->
        <a data-wysihtml5-command="createLink">insert link</a>
        <div data-wysihtml5-dialog="createLink" style="display: none;">
          <label>
            Link:
            <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>

• Панель инструментов содержит параметры форматирования. Убедитесь, что элемент панели инструментов имеет идентификатор и display: none.

• Обратите внимание: wysihtml5 поддерживает гораздо больше команд форматирования. Проверьте " расширенную демонстрацию " или найдите полный список " всех поддерживаемых команд здесь ".

4. Инициализируйте wysihtml5.

      <script>
      var editor = new wysihtml5.Editor("wysihtml5-textarea", { // id of textarea element
        toolbar:      "wysihtml5-toolbar", // id of toolbar element
        parserRules:  wysihtml5ParserRules // defined in parser rules set 
      });
      </script>

• Убедитесь, что вы разместили <script> в конце документа, перед </body>тег, потому что документ должен быть загружен перед запуском скрипта. Или проверьте, загружен ли документ (например, jQuery$(document).ready()) и инициализировать редактор.

• wysihtml5 поддерживает гораздо больше " параметров конфигурации ".

5. Используйте набор классов CSS для стилизации содержимого редактора.

• Браузеры используют таблицу стилей по умолчанию для стилей элементов, поэтому, если вы используете b, i, ul и li, в редакторе уже видны некоторые стили.

• Но для цветов мы используем классы вроде.wysiwyg-color-fuchsia, а для поплавков -.wysiwyg-float-right или -left.

• См. " CSS расширенной демонстрации " (см. " Белый список разрешенных классов "). Вы можете добавить эти классы с помощью " таблицы стилей - параметр конфигурации " (при инициализации wysihtml5, см. Выше), т.е.

  stylesheets: ["css/reset.css", "css/editor.css"]
  

• Тогда таблицы стилей будут связаны из заголовка содержимого iframe.