Editor.js easy allows you to create new CodeMirror textareas, with a few more nice features including preview. Editor.js includes CodeMirror, and a few modes including XML, CSS, htmlmixed and JavaScript. But, you can easily include any other mode, theme or whatever.
This is just a basic example, without livepreview.
<!DOCTYPE html>
<html>
<head>
<title>Editor.js</title>
</head>
<body>
<div>
<textarea id="editor"><div id="my-editor">
My Editor.js!
</div></textarea>
</div>
<script src="public/js/bundle.js"></script>
<script type="text/javascript">
var editor = new Editor({
textareas: {
'editor': {
'element': '#editor'
}
}
});
</script>
</body>
</html>| Options | Type | Default | Description |
|---|---|---|---|
| textareas | Object | Holds all textareas to transform into CodeMirror |
We don't support this at the moment. But! There is a workaround to get it working:
editor.preview.textareas.html.codemirror.on('change', function(cm, change) {
editor.preview.compile();
});Yes, you have to call it on every textarea you want to livepreview.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent