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