HTML editor

Create a rich HTML or markdown editor with an immediate preview and syntax highlighting.

The HTML editor allows you to write in HTML or Markdown while it generates a real-time preview. It includes a toolbar that helps you to change text appearences and add links, pictures, blockquotes and lists without having to write code. The editor provides syntax highlighting for both HTML and Markdown and you can even toggle to fullscreen mode, so that you can work undisturbed on your content.

Usage

To apply this component, you firstly need to include the necessary CodeMirror and marked dependencies. To do so, just add the appropriate script to the header of your project.

<!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>

Afterwards, just add the data-uk-htmleditor attribute to a <textarea> element.

Example

Markup

<textarea data-uk-htmleditor>...</textarea>

Markdown

You can also write markdown inside the HTML editor. Just add the markdown:true option to the data attribute.

Example

Markup

<textarea data-uk-htmleditor="{markdown:true}">...</textarea>

Tab mode

You can also switch between Markdown and Preview mode. Just add the data-uk-htmleditor="{mode:'tab'} attribute.

Example

Markup

<textarea data-uk-htmleditor="{mode:'tab'}">...</textarea>

JavaScript options

This is an example of how to set options via attribute:

data-uk-htmleditor="{mode:'split', maxsplitsize:600}"

Option	Possible value	Default	Description
`mode`	'split', 'tab'	'split'	View mode
`enablescripts`	boolean	false	Run inline scripts and style within the preview
`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", ... ]	Button list to appear in the toolbar
`maxsplitsize`	integer	1000	Min. browser width when to switch to responsive tab mode when in split mode
`lblPreview`	any string	'Preview'	Label string for preview mode
`lblCodeview`	any string	'Markdown'	Label string for code mode

Init element manually

var htmleditor = UIkit.htmleditor(textarea, { /* options */ });