How to use

Quick use

<link rel="stylesheet" href="jotted.css"> <script src="jotted.js"></script> <div id="editor"></div> <script> new Jotted(document.querySelector('#editor'), { files: [{ type: 'html', url: 'index.html' }] }) </script>

Options

Initialize Jotted with new Jotted(elementNode, optionsHash) .

The first argument is a DOM container where the editor will be created. The second argument is a hash of options.

Available options are:

files

Type: Array Default: []

Array of Object s specifying files that will be loaded. Objects inside the array must follow this pattern:

{ type: "html", // can be "html", "css", or "js" url: "/index.html", // load the file from a url (restricted by the same-domain policy), OR content: "<h1>HTML Content</h1>" // insert file content as string }

Use either url or content , not both.

showBlank

Type: Boolean Default: false

Specifies if panes/tabs without content/files should be visible.

runScripts

Type: Boolean Default: true

Specifies if script tags inside HTML content should be ran.

pane

Type: String Default: result

Specifies which pane/tab should be the default one opened. Can be result , html , css or js .

debounce

Type: Number Default: 250

Sets the debounce interval used by the change event (eg. render changes in the Result pane after a change in an editor).

plugins

Type: Array Default: []

Array of String s or Object s setting the plugins used by this editor instance.

If String , specify plugin name.

If Object , follow this pattern:

{ name: 'less', // plugin name options: {} // options hash to be passed to plugin }

Example