# 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

<h1>Heading</h1> <p>Lorem ipsum dolor sit <strong>amet</strong>, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <a href="#">This is a link</a></p> <ul> <li>Item</li> <li>Item</li> <li>Item</li> </ul> <h2>Heading</h2> <p>Ut enim ad <em>minim</em> veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>

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

#Heading Lorem ipsum dolor sit **amet**, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. [This is a link](#) * Item * Item * Item ## Heading Ut enim ad *minim* veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <a href="#">This link is written in HTML</a>

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

#Heading Lorem ipsum dolor sit **amet**, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. [This is a link](#) * Item * Item * Item ## Heading Ut enim ad *minim* veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <a href="#">HTML syntax highlightning</a> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

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