editron Script-Editor

Add code editor for html and css.

npm i editron-script-editor --save

Setup

Add the bundled editor as a plugin

Use bundled versions of this editor

Add the editor after the core-modules and it will register automatically (paths depend on your build-setup)

<link rel="stylesheet" href="../node_modules/editron-script-editor/dist/editron-script-editor.css">
 
<!-- plugin editor -->
<script type="text/javascript" src="../node_modules/editron/dist/editron-modules.js"></script>
<script type="text/javascript" src="../node_modules/editron/dist/editron.js"></script>
<script type="text/javascript" src="../node_modules/editron-script-editor/dist/editron-script-editor.js"></script>

Webpack build

bundle the editor into your editron-application

Javascript

To use this editor within a webpack build, require the editor and add it to the editors list

const editronScriptEditor = require("editron-script-editor");
const editors = [
    editronScriptEditor
    ...otherEditors
];
const editron = new Editron(schema, data, { editors });

Styles

Optionally import the custom script-editor styles via sass

@import "editron-script-editor/editron-script-editor.scss";

or simply add the bundled css-file (path is depending on your build-setup)

<link rel="stylesheet" href="../node_modules/editron-script-editor/dist/editron-script-editor.css">

Schema

The editor will be added for a matching schema like

{
    "type": "string",
    "format": "css"
}

{
    "type": "string",
    "format": "htmlmixed"
}

{
    "type": "string",
    "format": "javascript"
}