Редактор HTML

Расширенный редактор HTML или Markdown с предварительным просмотром и подсветкой синтаксиса.

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


Применение

Чтобы использовать компонент «HTML editor», сначала нужно подключить необходимые CodeMirror и marked зависимости. Для этого просто добавьте соответствующие строки в начало вашего проекта.

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <link rel="stylesheet" href="uikit.min.css" />
        <script src="jquery.js"></script>
        <script src="uikit.min.js"></script>

        <!-- Codemirror и marked зависимости -->
        <link rel="stylesheet" href="codemirror/lib/codemirror.css">
        <script src="codemirror/lib/codemirror.js"></script>
        <script src="codemirror/mode/markdown/markdown.js"></script>
        <script src="codemirror/addon/mode/overlay.js"></script>
        <script src="codemirror/mode/xml/xml.js"></script>
        <script src="codemirror/mode/gfm/gfm.js"></script>
        <script src="marked.js"></script>

        <!-- HTML редактор - CSS и JavaScript -->
        <link rel="stylesheet" href="htmleditor.css">
        <script src="htmleditor.js"></script>
    </head>
    <body>
    
    </body>
</html>

Добавление редактора

После этого просто добавьте атрибут data-uk-htmleditor к элементу <textarea>.

Разметка

<textarea data-uk-htmleditor>...Содержимое...</textarea>

Пример


Markdown

Язык разметки Markdown

В редакторе HTML, также можно использовать облегчённый язык разметки Markdown. Просто добавьте к data-* атрибуту опцию markdown:true.

Разметка

<textarea data-uk-htmleditor="{markdown:true}">...</textarea>

Пример с Markdown


Режим Tab

Переключение вкладок

Вы можете переключаться между режимами Markdown и Preview. Просто добавьте атрибут data-uk-htmleditor="{mode:'tab'}.

Разметка

<textarea data-uk-htmleditor="{mode:'tab'}">...</textarea>

Пример


Параметры JavaScript

Это пример того, как установить параметры через атрибут:

data-uk-htmleditor="{mode:'split', maxsplitsize:600}"
Опция Возможное значение По умолчанию Описание
mode 'split', 'tab' 'split' Режим просмотра
enablescripts boolean false Запустите встроенные scripts и style в предварительном просмотре
iframe boolean or string true Show preview in iframe. You can pass an url to a stylesheet to be included in the iframe
toolbar Array [ "bold", "italic", "strike", "link", "picture", ... ] Список кнопок для отображения на панели инструментов
maxsplitsize integer 1000 Мин. ширина, когда переключаться в режим адаптивных вкладок в режиме split (разделения).
lblPreview any string 'Preview' Вкладка режима предварительного просмотра
lblCodeview any string 'Markdown' Вкладка для режима кода

Инициировать вручную

var htmleditor = UIkit.htmleditor(textarea, { /* options */ });