Documentation

Snippets

Type: String, Object

Default: false

Snippets are prepared code sections consisting of any html elements. The snippets setting allows you to get snippets from JSON file.

ArticleEditor('#entry', {
    css: '/your-article-dist-path/',
    snippets: '/my-snippets/snippets.json'
});

Example of JSON:

{
    "mysnippet": {
        "name": "My Snippet",
        "html": "<h1>...</h1><p>...</p>"
    },
    "mysnippet2": {
        "name": "My Other Snippet",
        "html": "<h2>...</h2><div><p>...</p></div>"
    }
}

Or you can set the JSON object directly to the setting like this:

ArticleEditor('#entry', {
    css: '/your-article-dist-path/',
    snippets: {
        "mysnippet": {
            "name": "My Snippet",
            "html": "..."
        },
        "mysnippet2": {
            "name": "My Other Snippet",
            "html": "..."
        }
    }
});

Article builds a preview of the snippet automatically as an html preview. But for more accurate display, you can specify a screenshot of the snippet with image size 400x200px:

{
    "mysnippet": {
        "name": "My Snippet",
        "image": "my-snippets/my-snippet.png",
        "html": "..."
    }
}