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>

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.

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>

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

This link is written in HTML

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.

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

HTML syntax highlightning

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