Редактор 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 */ });