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