github.com/json-editor/json-editor @2.17.1 sqlite

Base type editors

Hidden

Description Base editor class for hidden values.

Trigger: "type": "hidden"

Supported Types: N/A

Global options: N/A

Schema options: N/A

Options callback N/A

Required options: none

Source: src/editors/hidden.js

Integer

Description Base editor class for integer values.

Trigger: "type": "integer"

Supported Types: N/A

Global options: N/A

Schema options: N/A

Options callback N/A

Required options: none

Source: src/editors/integer.js

Number

Description Base editor class for numeric values.

Trigger: "type": "number"

Supported Types: N/A

Global options: N/A

Schema options: N/A

Options callback N/A

Required options: none

Source: src/editors/number.js

String

Description Base editor class for string values.

Trigger: "type": "string"

Supported Types: N/A

Global options: N/A

Schema options: N/A

Options callback N/A

Required options: none

Source: src/editors/string.js

Special format editors

ACE

Description Ace is an embeddable code editor written in JavaScript. It matches the features and performance of native editors such as Sublime, Vim and TextMate.

For configuration options, see the ACE homepage.

Triggers:

Click to expand!

"format": "actionscript"

"format": "batchfile"

"format": "c"

"format": "c++"

"format": "cpp"

"format": "coffee"

"format": "csharp"

"format": "css"

"format": "dart"

"format": "django"

"format": "ejs"

"format": "erlang"

"format": "golang"

"format": "groovy"

"format": "handlebars"

"format": "haskell"

"format": "haxe"

"format": "html"

"format": "ini"

"format": "jade"

"format": "java"

"format": "javascript"

"format": "json"

"format": "less"

"format": "lisp"

"format": "lua"

"format": "makefile"

"format": "matlab"

"format": "mysql"

"format": "objectivec"

"format": "pascal"

"format": "perl"

"format": "pgsql"

"format": "php"

"format": "python"

"format": "prql"

"format": "r"

"format": "ruby"

"format": "rust"

"format": "sass"

"format": "scala"

"format": "scss"

"format": "smarty"

"format": "sql"

"format": "sqlserver"

"format": "stylus"

"format": "svg"

"format": "typescript"

"format": "twig"

"format": "vbscript"

"format": "xml"

"format": "yaml"

``"format": "zig"

Supported Types: string

Global options: JSONEditor.defaults.options.ace

Schema options: options.ace

Options callback JSONEditor.defaults.callbacks.ace

Required options: none

Source: src/editors/ace.js

Note: if you use a CDN version of the ACE library, you need to set the ACE basePath variable to the path of the CDN library. You can do it like this. (Tested with jsdelivr.net)

var aceScript = document.querySelector('script[src*="ace-builds"]');
if (aceScript.src && window.ace) {
  window.ace.config.set('basePath', aceScript.src.replace(/(.*\/)[^\/]+$/g, "$1"));
}

Autocomplete

Description Accessible autocomplete component for vanilla JavaScript.

For configuration options, see the Autocomplete homepage.

Trigger: "format": "autocomplete"

Supported Types: string

Global options: JSONEditor.defaults.options.autocomplete

Schema options: options.autocomplete

Options callback JSONEditor.defaults.callbacks.autocomplete

Required options: search (callback)

Source: src/editors/autocomplete.js

Example

Javascript

window.JSONEditor.defaults.callbacks = {
    "autocomplete": {
        // This is callback functions for the "autocomplete" editor
        // In the schema you refer to the callback function by key
        // Note: 1st parameter in callback is ALWAYS a reference to the current editor.
        // So you need to add a variable to the callback to hold this (like the
        // "jseditor_editor" variable in the examples below.)

        // Setup API calls
        "search_za": function search(jseditor_editor, input) {
            var url = '/eiao/api/json-object?filter[or][][data_json][LIKE]=' + encodeURI(input) +'&filter[or][][uuid][LIKE]=' + encodeURI(input);;

            return new Promise(function (resolve) {
                if (input.length < 2) {
                    return resolve([]);
                }

                fetch(url).then(function (response) {
                    return response.json();
                }).then(function (data) {
                    resolve(data);
                });
            });
        },
        "renderResult_za": function(jseditor_editor, result, props) {
            return ['<li ' + props + '>',
                '

' + result.data_json + '

',
                '

' + result.uuid.substring(0,7) + ' <small>' + result.schema_uuid.substring(0,5) + '<small>

',
                '</li>'].join('');
        },
        "getResultValue_za": function getResultValue(jseditor_editor, result) {
            return result.uuid;
        }
    }
};

JSON-schema

{
    "items": {
        "title": "UUID",
        "type": "string",
        "description": "reference (autocomplete)",
        "format": "autocomplete",
        "options": {
            "autocomplete": {
                "search": "search_za",
                "getResultValue": "getResultValue_za",
                "renderResult": "renderResult_za",
                "autoSelect": true
            }
        }
    },
    "title": "Project references",
    "type": "array"
}

Checkbox

Description Checkbox format.

Trigger: "format": "checkbox" + enum

Supported Types: string, integer, number, boolean

Global options: N/A

Schema options: N/A

Options callback N/A

Required options: none

Source: src/editors/checkbox.js

Cleave

Description Format your <input/> content when you are typing. * Credit card number formatting * Phone number formatting * Date formatting * Numeral formatting * Custom delimiter, prefix and blocks pattern

For configuration options, see the Cleave homepage.

Trigger: options.cleave

Supported Types: string, number, integer, boolean

Global options: JSONEditor.defaults.options.cleave

Schema options: options.cleave

Options callback JSONEditor.defaults.callbacks.cleave

Required options: none

Source: src/editors/string.js

IMask

Description Javascript input mask.

For configuration options, see the IMask homepage.

Trigger: ``options.imask

Supported Types: string, number, integer, boolean

Global options: JSONEditor.defaults.options.imask

Schema options: options.imask

Options callback JSONEditor.defaults.callbacks.imask

Required options: none

Special options: returnUnmasked when true, returns the unmasked value

Source: src/editors/string.js

IMask configuration format is not "JSON friendly" as it is possible to set the mask to an object ("Date", "Number", "IMask.MaskedEnum" and "IMask.MaskedRange") or a regular expression. In order for those to work, you will have to enclose them in quotes. And for regular expressions, you will also have to prefix the quoted regular expression with the keyword "regex:"

Example of an iMask mask config:

  mask: [
    {
      mask: 'RGB,RGB,RGB',
      blocks: {
        RGB: {
          mask: IMask.MaskedRange,
          from: 0,
          to: 255
        }
      }
    },
    {
      mask: /^#[0-9a-f]{0,6}$/i
    }
  ]

The same config "converted" to JSON-Editor format:

  "mask": [{
    "mask": "RGB,RGB,RGB",
    "blocks": {
      "RGB": {
        "mask": "IMask.MaskedRange",
        "from": 0,
        "to": 255
      }
    }
  },
    {
      "mask": "regex:/^#[0-9a-f]{0,6}$/i"
    }]

Flatpickr

Description Lightweight and powerful datetime picker.

For configuration options, see the Flatpickr homepage.

Trigger: "format": "datetime-local", "format": "date" or "format": "time"

Supported Types: string, integer

Global options: ``JSONEditor.defaults.options.flatpickr

Schema options: ``options.flatpickr

Options callback ``JSONEditor.defaults.callbacks.flatpickr

Required options: none

Source: src/editors/datetime.js

Jodit

Description An excellent WYSIWYG editor written in pure TypeScript without the use of additional libraries.

For configuration options, see the Jodit homepage.

Trigger: "format": "jodit"

Supported Types: string

Global options: JSONEditor.defaults.options.jodit

Schema options: options.jodit

Options callback JSONEditor.defaults.callbacks.jodit

Required options: none

Source: src/editors/jodit.js

SCEditor

Description A lightweight, open source, WYSIWYG BBCode and (X)HTML editor.

For configuration options, see the SCEditor homepage.

Triggers: "format": "xhtml" or "format": "bbcode"

Supported Types: string

Global options: JSONEditor.defaults.options.sceditor

Schema options: options.sceditor

Options callback JSONEditor.defaults.callbacks.sceditor

Required options: none

Source: src/editors/sceditor.js

Select2

Description Select2 gives you a customizable select box with support for searching, tagging, remote data sets, infinite scrolling, and many other highly used options.

For configuration options, see the Select2 homepage.

Trigger: "format": "select2"

Supported Types: string, number, integer, boolean (using enum)

Global options: JSONEditor.defaults.options.select2

Schema options: options.select2

Options callback JSONEditor.defaults.callbacks.select2

Required options: none

Source: src/editors/select2.js and src/editors/array/select2.js

Selectize

Description Selectize is the hybrid of a textbox and <select> box. It's jQuery-based and it's useful for tagging, contact lists, country selectors, and so on..

For configuration options, see the Selectize homepage.

Trigger: "format": "selectize"

Supported Types: string, number, integer, boolean (using enum)

Global options: JSONEditor.defaults.options.selectize

Schema options: options.selectize

Options callback JSONEditor.defaults.callbacks.selectize

Required options: none

Source: src/editors/selectize.js and src/editors/array/selectize.js

SimpleMDE

Description SimpleMDE is a simple, embeddable, and beautiful JS markdown editor.

For configuration options, see the SimpleMDE homepage.

Trigger: "format": "markdown"

Supported Types: string

Global options: JSONEditor.defaults.options.simplemde

Schema options: options.simplemde

Options callback JSONEditor.defaults.callbacks.simplemde

Required options: none

Special options: autorefresh when true, fixes problem with Chrome and editor inside Tabs

Source: src/editors/simplemde.js

Starrating

Description Star based rating.

Trigger: "format": "rating"

Supported Types: string, integer

Global options: ``JSONEditor.defaults.options.rating

Schema options: ``options.rating

Options callback N/A

Required options: none

Source: src/editors/starrating.js

Upload

Description Upload files to server.

Trigger: "format": "upload"

Supported Types: string

Global options: ``JSONEditor.defaults.options.upload

Schema options: ``options.upload

Options callback ``JSONEditor.defaults.callbacks.upload

Required options: upload_handler

Source: src/editors/upload.js

Option	Type	Description	Default value
title	string	Title of the Browse button	"Browse"
auto_upload	boolean	Trigger file upload button automatically	false
allow_reupload	boolean	Allow reupload of file (overrides the readonly state)	false
hide_input	boolean	Hide the Browse button and name display (Only works if 'enable_drag_drop' is true)	false
enable_drag_drop	boolean	Enable Drag&Drop uploading.	false
drop_zone_top	boolean	Position of dropzone. true=before button input, false=after button input	false
drop_zone_text	string	Text displayed in dropzone box	"Drag & Drop file here"
alt_drop_zone	string	Alternate DropZone DOM S