- Article Editor

Requirements

Article Editor requires a modern browser with full Javascript and HTML5 support. Article Editor has been tested in and fully supports following browsers:

Latest Chrome (desktop and mobile)
Latest Firefox (desktop only)
Latest Safari (desktop and mobile)
Latest Opera (webkit)
Microsoft Edge

Installation

Article Editor is not a desktop app. This is a web content creation application that should be installed on your website.

So, first, you need to purchase Article Editor and download it from our site, then you can proceed with the installation.

Installing Article Editor is very simple. You need to connect the CSS file editor between the head tag and the JS file before the closed body tag.

Here is a complete code example of how a page with a connected Article may look.

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

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

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

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

Here is a live example of the start of Article.

Make sure that you specify the correct paths to the editor files, depending on the directory in which they are located.

Also, editing in Article works inside iframe, so the editor must know where the style files are. That is why Article always runs with a css setting that indicates the path to content styles and to edit control styles. See more about this setting

In the example above, you can see that the JS file of the editor is connected to the closed tag body, but of course you can include the JS file in thehead tag, just like the CSS file of the editor. In this case, call the Editor after the DOM content loaded, for example, like this:

document.addEventListener('DOMContentLoaded', function() {
    ArticleEditor('#entry', {
        css: '/your-article-dist-path/'
    });
});

Module import

import '../dist/article-editor.js';

ArticleEditor('#entry', { ...opts... });

Article can work was ES6 module, just import it and use ArticleEditor object in your app. Or use usm version for import.

import ArticleEditor from '../dist/article-editor.usm.min.js';

ArticleEditor('#entry', { ...opts... });

Quick start

The Article Editor replaces a textarea element on the page. So when calling the editor, you need to specify the selector of this element. This can be an ID or class.

For example, you have the following element on the page:

<textarea id="entry">
    <p>Content</p>
</textarea>

The call of the editor for it will be like this:

<script>
ArticleEditor('#entry', {
    css: '/your-article-dist-path/'
});
</script>

Now the textarea element will be replaced with Article and you can edit the content.

Make sure that the call to ArticleEditor (selector) is after the JS file of the editor, or use the call after DOM content loaded, for example, like this:

document.addEventListener('DOMContentLoaded', function() {
    ArticleEditor('#entry', {
        css: '/your-article-dist-path/'
    });
});

Here is a live example of the start of Article.

Start with settings

Settings are set to Article as an object when the editor launched. You can see the entire list of settings and a description of each of them.

Below you can see an example of calling the rditor with the settings:

ArticleEditor('#entry', {
    source: false,
    editor: {
        focus: true
    }
});

The first setting source turns off the source code view, and the second indicates that the focus should be placed on the editor when it starts up.

Here is a live example of launching the editor with settings.

Load with plugins

Plugins extend the functions of Article Editor. You can create your own plugin or use the ones that we made.

To call Article with plugins, first you need to install a plugin on the page, according to the instructions of the plugin. Usually, it is enough just to connect the JS file of the plugin after the JS file of the editor.

Now you can call the editor with the plugin, specifying in the settings which plugin should be launched:

ArticleEditor('#entry', {
    plugins: ['inlineformat']
});

Here is an example of setting, if you need to run several plugins:

ArticleEditor('#entry', {
    plugins: ['inlineformat', 'style']
});

Just specify in the array, those plugins that are needed.

Here is a live example of calling the editor with plugins.

Set focus on the start

By default, the editor does not focus on content at start. This can be changed by specifying the editor.focus setting, like this:

ArticleEditor('#entry', {
    css: '/your-article-dist-path/',
    editor: {
        focus: true
    }
});

Now the focus will be set to the first block of content and you can immediately start editing.

Docs

Documentation