Editor Properties¶
The svelte-jsoneditor
has a range of properties allowing customisation of appearance and function. The SvelteJSONEditorWidget
allows you to alter svelte-jsoneditor
’s defaults.
Attention
Not all svelte-jsoneditor
properties are configurable, notably the on*
callbacks. To add such callbacks you’d need to override the widget template yourself, since they require javascript functions.
Available Properties¶
Official documentation and descriptions are available on the svelte-jsoneditor GitHub page.
Property
Type
Default
mode
‘tree’ or ‘text’ or ‘table’
‘tree’
mainMenuBar
boolean
True
navigationBar
boolean
True
statusBar
boolean
True
askToFormat
boolean
True
readOnly
boolean
False
indentation
number or string
4
tabSize
number
4
escapeControlCharacters
boolean
False
escapeUnicodeCharacters
boolean
False
flattenColumns
boolean
True
Using Properties¶
To alter the default properties used by ALL widgets in your application, see the SVELTE_JSONEDITOR_PROPS setting.
To alter the widget for an individual field, the SvelteJSONEditorWidget
accepts an additional argument, props
. The following example shows this used in a form:
# forms.py
from django import forms
class SvelteJsonEditorForm(forms.Form):
my_json = forms.JSONField(widget=SvelteJSONEditorWidget(props={
"readOnly": True
}))
Or to use custom widget properties in the django admin:
# admin.py
from django import forms
from django.contrib import admin
from .models import ExampleModel
class CustomForm(forms.ModelForm):
class Meta:
model = ExampleModel
fields = "__all__"
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.fields["some_json_field"].widget = SvelteJSONEditorWidget(props={"readOnly": True})
@admin.register(ExampleModel, ExampleModelAdmin)
class ExampleModelAdmin(admin.ModelAdmin):
form = CustomForm
formfield_overrides = {
models.JSONField: {
"widget": SvelteJSONEditorWidget,
}
}