Documentation

Snippets

url #

Type: Boolean, String

Default: false

This option sets the path to the directory where snippets are stored as html files.

ArticleEditor('#entry', {
    snippets: {
        url: '/my-snippets/',
        items: {
            mysnippet: "My Snippet",
            mysnippet2: "My Snippet2"
        }
    }
});

In this example, the editor will access the GET request for files in the directory /my-snippets/ creating the address by the name of the snippet, like this:

/my-snippets/mysnippet.html

The snippet file can contain any html, if it is wrapped in a div tag with a class name of the snippet, for example:

<div class="mysnippet">
    <p>Hi everyone! This is my snippet</p>
</div>

json #

Type: Boolean

Default: false

This setting allows you to get snippets from JSON file.

ArticleEditor('#entry', {
    snippets: {
        url: '/my-snippets/snippets.json',
        json: true,
        items: {
            mysnippet: "My Snippet",
            mysnippet2: "My Snippet2"
        }
    }
});

Example of JSON:

{
    "mysnippet": {
        "html": "<div class="mysnippet"><p>Hi everyone! This is my snippet</p></div>"
    },
    "mysnippet2": {
        "html": "<div class="mysnippet"><p>Hi everyone! This is my other snippet</p></div>"
    }
}

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

ArticleEditor('#entry', {
    snippets: {
        json: {
            "mysnippet": {
                "html": "<div class="mysnippet"><p>Hi everyone! This is my snippet</p></div>"
            },
            "mysnippet2": {
                "html": "<div class="mysnippet"><p>Hi everyone! This is my other snippet</p></div>"
            }
        },
        items: {
            mysnippet: "My Snippet",
            mysnippet2: "My Snippet2"
        }
    }
});