Menu

Examples

Templates

This example shows how templates work in Article Editor. Just click on the icon on the toolbar and try it. See more in the description of the templates 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/',
        templates: '/path-to-templates.json'
    });
    </script>
</body>
</html>

Usage

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

{
    "numbers": {
        "name": "Numbers",
        "html": "..."
    },
    "report": {
        "name": "Report",
        "html": "..."
    },
    "visual-data": {
        "name": "Visual Data",
        "html": "..."
    }
}

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


ArticleEditor('#entry', {
    css: '/your-article-dist-path/',
    templates: {
        "numbers": {
            "name": "Numbers",
            "html": "..."
        },
        "report": {
            "name": "Report",
            "html": "..."
        },
        "visual-data": {
            "name": "Visual Data",
            "html": "..."
        }
    }
});

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

{
    "numbers": {
        "name": "Numbers",
        "image": "my-templates/template-numbers.png",
        "html": "..."
    }
}