Skip to content

Latest commit

 

History

History
364 lines (315 loc) · 11.5 KB

README_ADDON.md

File metadata and controls

364 lines (315 loc) · 11.5 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": "r"
"format": "ruby"
"format": "sass"
"format": "scala"
"format": "scss"
"format": "smarty"
"format": "sql"
"format": "sqlserver"
"format": "stylus"
"format": "svg"
"format": "twig"
"format": "vbscript"
"format": "xml"
``"format": "yaml"

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

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

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
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

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

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"
        }
      }
    }
  }
}