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-f-htmleditor attribute to a <textarea> element.

Example

Markup

<textarea data-f-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-f-htmleditor="{markdown:true}">...</textarea>

Tab mode

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

Example

Markup

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

JavaScript options

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

<div data-f-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
`iframe`	boolean	false	use in iframe mode
`markdown`	boolean	false	enable or disable markdown mode
`autocomplete`	boolean	true	enable or disable autocomplete
`height`	integer	500	height of the component
`markedOptions`	object	{ gfm: true, tables: true, breaks: true, pedantic: true, sanitize: false, smartLists: true, smartypants: false, langPrefix: 'lang-'}	set options for the markup
`codemirror`	object	{ mode: 'htmlmixed', lineWrapping: true, dragDrop: false, autoCloseTags: true, matchTags: true, autoCloseBrackets: true, matchBrackets: true, indentUnit: 4, indentWithTabs: false, tabSize: 4, hintOptions: {completionSingle:false} }	set codemirror options
`lblMarkedview`	string	Markdown	label for the markdown tab

Init element manually

let htmleditor = FatKit.htmleditor(textarea, { /* options */ });