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 */ });