> Very customizable, extendable, fast and hackable json-editor (like
> jdorn/json-editor), to build your data-input-interface based on a json-schema

Editron Core

> This is the core of the editron editor. It may be used to build a custom application (instead of using the default
> editron application).

This is the base for building a complete editron json-editor. Its Controller may be used to setup one or many input-forms, based on nested editors for each input-data. The core and the main app are still under development and the api has not yet settled. Still, it is flawlessly used in production for a CMS at the Süddeutsche Digitale Medien GmbH.

Features

- Full json-schema draft04 support
- Basic editors supporting _objects_, _arrays_, _checkboxes_, _oneOf-selection_, _textarea_, _input_ and _selections_
- Additional editors currently available
- _editron-wysiwyg-editor_
- _editron-script-editor_
- _editron-overview-navigation_
- inline-validation
- undo/redo
- display only a specific data pointer or switch them, using json-pointer-syntax
- collaborative editing using _editron-sync-service_
- optional styles, supporting custom styling
- customizable translations and error-messages
- add custom editors (aka widgets)
- basically independent of any frameworks (mithriljs is used internally)
- access to all methods
- very flexible editors (requiring some knowledge of implementation details)
- build-helpers and integration tests
- independent builds, which enables simple plug&edit through an include-script

Installation

npm i editron-core --save

Add the required fonts and rendering dependencies to your website

``html



`

And add the editron-core modules and their export (paths depend on your build-setup):

`html



`

Usage

editron-core.js exposes a global object editronCore to the window object, which may be accessed to retrieve the main Controller, which is the basis of an editron-editor:

`js
// and create a new editor instance (referencing a unique json-schema and data)
const controller = new editronCore.Controller(myJsonSchema, myJsonData);
// create the editor within the selected DOM-Element
const main = controller.createEditor("#", document.querySelector("#editor"));

// create another form for the data-point at { header: ... }
const header = controller.createEditor("#/header", document.querySelector("#editor-header"));

// receive a notification when the data has changed
controller.data().observe("#", (event) => {
console.log("data has changed to", controller.data().get());
});

// access services for further functionality
const dataService = editor.data();
const schemaService = editor.schema();
const validationService = editor.validator();
`

for details on the services checkout json-schema-services

Build your own application using webpack

> You may also build a custom application using webpack. Following the build steps of
> webpack.build.js should answer most
> questions.


`js
const Controller = require("editron-core").Controller;

// follow usage explanation above
``