Skip to content

Latest commit

 

History

History
577 lines (496 loc) · 19.7 KB

README_ADDON.md

File metadata and controls

577 lines (496 loc) · 19.7 KB
Raw

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 + '>',
                '<div class="eiao-object-title">' + result.data_json + '</div>',
                '<div class="eiao-object-snippet">' + result.uuid.substring(0,7) + ' <small>' + result.schema_uuid.substring(0,5) + '<small></div>',
                '</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<br> **Supported Types:** string, number, integer, boolean<br> **Global options:** JSONEditor.defaults.options.imask<br> **Schema options:** options.imask<br> **Options callback** JSONEditor.defaults.callbacks.imask<br> **Required options:** none<br> **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<br> **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<br> **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<br> **Schema options:** options.upload
Options callback JSONEditor.defaults.callbacks.upload<br> **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 Selector (Can be created inside another property)
mime_type string/array If set, restrict upload to mime type(s)
max_upload_size integer Maximum file size allowed. 0 = no limit 0
upload_handler function Callback function for handling uploads to server

UUID

Description UUID format with autogenerated uuid value. Value must be a valid RFC 4122 uuid (Universally Unique IDentifier). If field has no initial value (startval) then a random uuid will be autogenerated.

Trigger: "format": "uuid"
Supported Types: string
Global options: N/A
Schema options: N/A
Options callback N/A
Required options: none
Source: src/editors/uuid.js

Picker

Description Optional support for color format using vanilla JS color picker with alpha selection.

Trigger: "format": "color"
Supported Types: string
Global options: JSONEditor.defaults.options.colorpicker
Schema options: options.colorpicker
Options callback JSONEditor.defaults.callbacks.colorpicker
Required options: none
Source: src/editors/colorpicker.js

Non-Active editors (Editors that return no results)

Button

Description The Button editor is a special editor that doesn't return any results. It can be used to trigger various JavaScript features, such as a Submit button.

Trigger: "type": "button"
Supported Types: N/A
Global options: N/A
Schema options: text, action, icon, validated
Options callback window.JSONEditor.defaults.callbacks.button
Required options: action
Source: src/editors/button.js

Info

Description The Info editor is a special editor that doesn't return any results. It can be used to insert textual blocks inside the form. Only properties available are title and description (bodytext).

Trigger: "type": "info"
Supported Types: N/A
Global options: N/A
Schema options: N/A
Options callback N/A
Required options: none
Source: src/editors/info.js

Option callback functions

The JSON Schema format doesn't support function values, but some 3rd-Party libraries has callback functions as options. To enable/use those type of options, you can create global callback functions and then refer to then by name in the schema options.

Note: The 1st parameter passed to the callback function is ALWAYS the current edtor instance. So you need to modify the callback functions to accommodate this.

Example option callback for Cleave.js

Click to expand! This example defines a callback function named "showCreditCardType" and shows how it is used inside the schema options.

JavaScript:

// Add Cleave.js options namespace to Global callback list
window.JSONEditor.defaults.callbacks.cleave = {
  // 1st parameter in callback is ALWAYS a reference to current editor instance.
  "showCreditCardType": function(jseditor_editor, type) {
    var el = jseditor_editor.element.nextSibling;
    if (el) el.innerHTML = 'Card type: <strong>' + type + '</strong>';
  }
};

Schema:

{
  "type": "object",
  "properties": {
    "creditcard": {
      "type": "string",
      "title": "Credit Card",
      "description": " ",
      "options": {
        "inputAttributes": {
          "placeholder": "enter credit card number"
        },
        "cleave": {
          "creditCard": true,
          "onCreditCardTypeChanged": "showCreditCardType"
        }
      }
    }
  }
}

Themes

Themes have own options for changing various aspects of the display.

Bootstrap 4

Option Default Description
input_size normal Changes input size, can be normal, small or large
custom_forms false Apply Bootstrap custom forms
object_indent true Indent nested object elements (use nested .card layout)
object_background bg-light Bootstrap 4 card background modifier class
object_text '' Bootstrap 4 card text color modifier class modifier class
table_border false Add border to array "table" row and cells
table_zebrastyle false Add "zebra style" to array "table" rows
tooltip bootstrap how to display tooltips (infoText). Can be browser for native [title], css for simple CSS Styling, or bootstrap for TWBS/Popper.js handling

Spectre

Option Default Description
input_size normal Changes input size, can be normal, small or large
label_bold true Labels in bold
object_indent false Indent nested object elements
object_border false Add border around object elements
align_bottom false Align elements to bottom of flex container
table_border false Add border to array "table" row and cells
table_zebrastyle false Add "zebra style" to array "table" rows

Tailwind

Option Default Description
input_size normal Changes input size, can be normal, small or large
label_bold false Labels in bold
object_panel_default true Indicates whether to use rules as default or alternate style
object_indent false Indent nested object elements
object_border false Add border around object elements
align_bottom false Align elements to bottom of flex container
table_border false Add border to array "table" row and cells
table_hdiv false Add bottom-border to array "table" cells
table_zebrastyle false Add "zebra style" to array "table" rows