====== JSON Editor Plugin ======

---- plugin ----
description: Integrate schema based JSON editor into json plugin.
author     : Janez Paternoster
email      : janez.paternoster@siol.net
type       : syntax, action
lastupdate : 2023-10-26
compatible : Hogfather,Igor,Jack Jackrum
depends    : json
conflicts  :
similar    : json, jsontable, jsongendoc, struct, data, strata
tags       : data, json, database, listing, tables

downloadurl: https://gitlab.com/dokuwiki-json/jsoneditor/-/archive/master/json-master.zip
bugtracker : https://gitlab.com/dokuwiki-json/jsoneditor/-/issues
sourcerepo : https://gitlab.com/dokuwiki-json/jsoneditor
donationurl: https://paypal.me/jnz022

screenshot_img: https://gitlab.com/dokuwiki-json/jsoneditor/-/raw/master/demo/screenshot.png
----

===== Installation =====
Search and install the plugin using the [[plugin:extension|Extension Manager]]. Refer to [[:Plugins]] on how to install plugins manually.

Install also [[https://www.dokuwiki.org/plugin:json|JSON plugin]].


===== Description =====
JSON Editor Plugin (Dokuwiki plugin) is based on [[https://www.dokuwiki.org/plugin:json|JSON plugin]]. It adds a JSON Editor to the page. [[https://github.com/json-editor/json-editor|JSON Editor]] (JavaScript library, included in the JSON Editor Plugin) takes a [[https://json-schema.org/|JSON Schema]] and uses it to generate an HTML form. Data for the editor is defined by the JSON Plugin.

User can edit JSON data according to the rules defined in JSON Schema. When user presses 'Validate and Save' button, changed JSON data is transferred to JSON Plugin (textarea). Data can then be saved to the Dokuwiki page without page refresh.

<code>
<jsoneditor id=per_diff path=person options=%$options% schema=%$schema%></jsoneditor>
</code>

Here is a [[https://dokuwiki-json-demo.1001beauty.si/|Dokuwiki JSON Demo Server]] with JSON database integrated into DokuWiki. Also source code of this plugin contains demo. You can copy the contents of the demo files into your Dokuwiki and experiment with them.


===== Usage =====
Syntax is similar as in [[https://www.dokuwiki.org/plugin:json|JSON Data Plugin]]:\\
''<jsoneditor'' //attributes// ''>'' //inline_json// ''</jsoneditor>''

It is parsed with same parser as ''<json>'' elements, so rules for //attributes// and //inline_json// are the same. It loads JSON data the same way, from //src// attribute and from //inline_json//. It only has some extra attributes and additional tab for the editor. Data source for the editor is JSON data defined by the %%<jsoneditor>%% element (see attributes 'path', 'src', 'src_ext' and //inline_json//).

==== Attribute 'options' ====
It must be a valid [[https://json.org/|JSON]] string inside single quotes. Special characters inside string, like ''%%'%%'', ''%%<%%'' or ''%%>%%'', can be passed by ''&apos;'', ''&lt;'' or ''&gt;''. Options are directly passed into [[https://github.com/json-editor/json-editor#options|JSON Editor]]. All JSON Editor options are freely configurable, except 'schema' and 'startval', which are set separately. Options may also be defined inside JSON database. In this case they can be referenced from there, for example ''options=%''''$path.to.editor_options%''.

Global options can be specified in configuration settings for Jsoneditor ({} by default). If set, attribute 'options' is combined with global options and may also override them.

==== Attribute 'schema' ====
It must be a valid [[https://json-schema.org/|JSON Schema]]. Attribute has the same rules as 'options' attribute.

==== Attribute 'save' ====
It specifies, how data are stored into ''//inline_data//''. If set to ''all'', then all 'combined_data' will be stored into 'inline_data' when 'Validate and Save' button is pressed. If set to any other value or is unspecified, then only the difference from the 'original data' will be stored.

==== Attribute 'display' ====
This attribute is from [[https://www.dokuwiki.org/plugin:json|JSON Data Plugin]]. Token 'schema' can be added to display options. It will display JSON schema used by editor in separate tab. For example: ''display=',schema' ''. To display all tabs collapsed, set for example: ''display=',jsoneditor' '' (without asterisk).


==== Template engines ====
JSON Editor (JavaScript library) uses template engines, which may automatically generate json data based on other json data. See [[https://github.com/json-editor/json-editor#templates]]. In addition to default barebones template engine, [[https://ejs.co/|EJS]] template engine is also included in the plugin. EJS is disabled by default, it can be enabled in the configuration settings for json plugin. EJS gives great power to the json data: javascript (inside Dokuwiki document) can be used for calculations between json data...

===== Useful links =====
  * [[https://json.org|Learn JSON]] - simple introduction to JSON, lightweight data-interchange format.
  * [[https://jsonlint.com/|Online JSON Validator]] - check JSON code for Syntax Errors.
  * [[https://json-schema.org/understanding-json-schema/index.html|Understanding JSON Schema]] - should read this, before starting with JSON editor.
  * [[https://github.com/json-editor/json-editor|JSON editor library]] - README contains specific information for the library used in the JSON Editor Plugin. Here is [[https://json-editor.github.io/json-editor/|Interactive demo]].
  * [[https://jsonschema.net/|JSON Schema Tool]] - generate sample Schema from your JSON Data.
  * [[https://regexr.com/|Regular expressions]] - useful for specifying patterns for strings. Learn and test online.