Menu

Examples

Snippets

This example shows how snippets work in Article Editor. Snippets are prepared parts of code that can be inserted via addbar by clicking the add button on the toolbar. See more in the description of the snippets setting.

Code

<!DOCTYPE html>
<html>
<head>
    <title>Article Editor</title>
    <meta charset="utf-8">

    <!-- css -->
    <link rel="stylesheet" href="/your-article-dist-path/article-editor.min.css" />
</head>
<body>
    <!-- element -->
    <textarea id="entry">
        <p>Content</p>
    </textarea>

    <!-- js -->
    <script src="/your-article-dist-path/article-editor.min.js"></script>

    <!-- call -->
    <script>
    ArticleEditor('#entry', {
        css: '/your-article-dist-path/',
        snippets: '/path-to-snippets.json'
    });
    </script>
</body>
</html>

Usage

Snippets are connected as a json file, for example, it can be that way:

{
    "author": {
        "name": "Author",
        "html": "..."
    },
    "note": {
        "name": "Note",
        "html": "..."
    },
    "big-quote": {
        "name": "Big Quote",
        "html": "..."
    }
}

Or you can specify a json object right in the setting like this:


ArticleEditor('#entry', {
    css: '/your-article-dist-path/',
    snippets: {
        "author": {
            "name": "Author",
            "html": "..."
        },
        "note": {
            "name": "Note",
            "html": "..."
        },
        "big-quote": {
            "name": "Big Quote",
            "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:

{
    "author": {
        "name": "Author",
        "image": "my-snippets/snippet-author.png",
        "html": "..."
    }
}