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
And add the editron-core modules and their export (paths depend on your build-setup):
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:
// and create a new editor instance (referencing a unique json-schema and data) const controller = myJsonSchema myJsonData; // create the editor within the selected DOM-Element const main = controller; // create another form for the data-point at { header: ... } const header = controller; // receive a notification when the data has changed controllerdata; // access services for further functionality const dataService = editordata; const schemaService = editor; const validationService = editor;
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.
const Controller = Controller; // follow usage explanation above