Set JSON data
Concept #
Redactor can receive content as a JSON object. You are not limited and can get HTML output at any time, even if the data was set as JSON. The same is true for data set to HTML. You can always get them as JSON using the API.
Moreover, each block can be retrieved as a separate JSON object using the API.
Set JSON #
JSON data is set using the editor's 'data' setting, which must be specified when running Redactor.
let app = Redactor('#entry', {
data: {
"version": "1.0.0",
"time" : 1650860257872,
"blocks": [
{
"type": "heading",
"content": "...",
"level": 1
},
{
"type": "text",
"content": "..."
},
{
"type": "image",
"src": "/path-to-image.jpg",
"alt": "Alt text",
"caption": "..."
},
{
"type": "heading",
"content": "...",
"level": 2
},
{
"type": "text",
"content": "..."
}
]
}
});
Version and time parameters are optional. Blocks is a mandatory parameter. See below for all parameters of each block.
Get JSON #
You can get content from the editor as a JSON object.
To do this, use getJson
method.
// call editor
let app = Redactor('#entry');
// get content from outside scripts
let data = app.editor.getJson();
// get content in the plugin method
let data = this.app.editor.getJson();
- JSON Data example
- See more how the API works
Common parameters for all blocks #
- type
String
- id
String
- style
Object
- classname
String
- placeholder
String
- attrs
Object
- uid
String
- time
Number
Parameters of each block #
The examples provide both mandatory and optional parameters. Required parameters are marked * (asterix).
address
- content*
String
{
"type": "address",
"classname": "address-block",
"content": "Address text"
}
dlist
- items*
Array
{
"type": "dlist",
"items": [
{
"term": "Term 1",
"desc": "Desc 1"
},
{
"term": "Term 2",
"desc": "Desc 2"
}
]
}
embed
- content*
String
- responsive
Boolean
- caption
String
{
"type": "embed",
"responsive": true,
"caption": "My video",
"content": "<iframe...>"
}
line
- common parameters only
{
"type": "line"
}
heading
- level*
Number
- content*
String
{
"type": "heading",
"content": "Title of text",
"level": 1
}
text
- content*
String
{
"type": "text",
"content": "Text"
}
list
- numbered
Boolean
- items*
Array
{
"type": "list",
"items": [
"Item 1",
"Item 2"
]
}
// numbered list
{
"type": "list",
"numbered": true,
"items": [
"Item 1",
"Item 2"
]
}
todo
- items*
Array
- content*
String
- checked*
Boolean
- content*
{
"type": "todo",
"items": [
{
"content": "Todo item 1",
"checked": true
},
{
"content": "Todo item 2",
"checked": false
}
]
}
pre
- content*
String
- caption
String
{
"type": "pre",
"caption": "My code",
"content": "function() {n echo 2;n}"
}
wrapper
- wrap*
String
- children*
Object
{
"type": "wrapper",
"wrap": "div",
"children": [
{
"type": "wrapper",
"wrap": "div",
"style": { "border": "1px dashed #ccc" },
"classname": "mydiv",
"children": [
{
"type": "text",
"content": "This is a paragraph1 <b>inside</b> div."
},
{
"type": "text",
"content": "This is a paragraph2 <b>inside</b> div."
}
]
},
{
"type": "text",
"content": "This is a paragraph3 <b>inside</b> div."
}
]
}
layout
- children*
Object
- width*
String
- children*
Object
- width*
{
"type": "layout",
"children": [
{
"type": "column",
"width": "40%",
"children": [
{
"type": "heading",
"level": 3,
"content": "Column 1"
},
{
"type": "text",
"content": "This is a paragraph"
}
]
},
{
"type": "column",
"width": "60%",
"children": [
{
"type": "heading",
"level": 3,
"content": "Column 2"
},
{
"type": "text",
"content": "This is a paragraph"
}
]
}
]
}
quote
- content*
String
- caption
String
{
"type": "quote",
"placeholder": "Type here...",
"content": "This is a quote item.",
"caption": "I am the author!"
}
image
- src*
String
- wrap
String
- caption
String
- srcset
String
- width
String
- alt
String
- url
String
- target
Boolean
- img
Object
{
"type": "image",
"width": "200px",
"height": "100px",
"caption": "My image caption",
"src": "/photo.jpg",
"srcset": "photo.jpg 2x",
"url": "https://example.com",
"alt": "Hello world",
"img": {
"style": {
"width": "200px",
"height": "100px"
}
},
"attrs": {
"image": 2
}
}
table
- head
Boolean
- foot
Boolean
- items*
Array
{
"type": "table",
"head": true,
"foot": true,
"items": [
["Head 1", "Head 2"],
["Cell 1", "Cell 2"],
["Cell 3", "Cell 4"],
["Foot 1", "Foot 2"]
]
}
noneditable
- content*
String
{
"type": "noneditable",
"content": '...html...'
}