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.

API getJson of block

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


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


{
    "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...'
}