Редактор 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 and marked dependencies -->
        <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 editor CSS and 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

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

Рабочий пример

Разметка

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

Tab mode

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

Пример

Разметка

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

JavaScript options

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

data-uk-htmleditor="{mode:'split', maxsplitsize:600}"
Option Possible value Default Описание
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 Min. browser width when to switch to responsive tab mode when in split mode
lblPreview any string 'Preview' Вкладка режима предварительного просмотра
lblCodeview any string 'Markdown' Вкладка для режима кода

Init element manually

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