HTML-редактор
Создать богатую HTML или уценки редактор с немедленного предварительного просмотра и подсветкой синтаксиса.
HTML-редактор позволяет писать в HTML или уценки, пока он генерирует в реальном времени предварительного просмотра. Она включает в себя панель инструментов, которая помогает вам изменить текст и явлений за добавление ссылок, картинок, цитат и списков, без необходимости писать код. Редактор обеспечивает подсветку синтаксиса для HTML и markdown и вы даже можете переключаться в полноэкранный режим, так что вы можете спокойно работать на ваше содержание.
Использование
Для установки данного компонента, вы во-первых должны включать необходимую CodeMirror и отмеченные зависимостей. Чтобы сделать это, просто добавьте соответствующий скрипт, чтобы Заголовок вашего проекта.
<!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:true
опция для данных атрибутов.
Пример
Разметки
<textarea data-uk-htmleditor="{markdown:true}">...</textarea>
Вкладка режим
Вы также можете переключаться между уценки и режим предварительного просмотра. Просто добавить 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 | Запуск встроенных скриптов и стилей в окне предварительного просмотра |
iframe |
boolean or string | true | Показать предварительный просмотр в окне iframe. Вы можете передать URL-адрес таблицы стилей должны быть включены в iframe |
toolbar |
Array | [ "bold", "italic", "strike", "link", "picture", ... ] | Кнопка list появляться в панели инструментов |
maxsplitsize |
integer | 1000 | Мин. когда Ширина браузера переключиться на aдаптивный вкладка режим, когда в режиме Split |
lblPreview |
any string | 'Preview' | Метка строки для предварительного просмотра режим |
lblCodeview |
any string | 'Markdown' | Ярлык строку для кода режима |
Инициализации элементов вручную
var htmleditor = UIkit.htmleditor(textarea, { /* options */ });