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.

• JSON Data example
• API setJson
• API getJson

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
• noneditable Boolean

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