j-CodeMirror

jComponent 20 · jcomponent@20 component Example loaded with jComponent 20

supports multiple cursors (shift + cmd + arrow-down/up)
supports finding selected text (cmd + d)
supports custom scrollbars

Configuration:

type {String} type for syntax highlighting (default: htmlmixed)
required {Boolean} enables "required" (default: false)
linenumbers {Boolean} shows line numbers (default: false)
icon {String} icon for label without fa- e.g. home, cog, etc.
height {Number} control height (default: 200 px)
label {String} label (default is HTML content)
disabled {Boolean} disables this component
tabs {Boolean} enables indent with tabs (default: false)
trim {Boolean} performs auto-trim and removes empty begin/end lines (default: false)
parent {String} can set height by parent element
margin {Number} a margin for height
minheight {Number} a minimal height for parent option (default: 200)

Method:

component.insert('some text') inserts a text to the current position of the cursor

Use it with <ui-component name="codemirror">. When the component is not loaded yet, jComponent downloads it on first use from the address in DEF.fallback (the Componentator CDN by default). Author: Peter Širka. Source: the Componentator components repository, MIT license.

example.html

<div style="width:500px">
	<ui-component name="codemirror" path="html" config="type:htmlmixed;required:true;height:200">HTML editor</ui-component>
</div>

<script>
	var html = '<h1>HELLO WORLD</h1>';
</script>