Editor

focus

Type: Boolean

Default: false

By default, Article doesn't receive focus on load, because there may be other input fields on a page. However, to set focus to the editor, you can use this setting:

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

classname

Type: String

Default: entry

Article creates a visual layer in which it places the edited content. This layer imitates the element where the content on your website should be.

Therefore, in order for the content to be displayed exactly as it will be on your website or anywhere else in your application, you need to specify the CSS styles for that layer or rename its class.

For example, if you create and edit content for a blog post, the site may have that content inside a div tag with a post class:

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

See how to specify and customize styles for content in Article.

padding

Type: Boolean

Default: true

This setting turns off padding inside the editable layer.

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

drop

Type: Boolean

Default: true

This setting allows you to turn off drag or drop images or any other elements in Article.

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

sync

Type: Boolean

Default: true

By default, Article synchronizes the visual layer with the textarea in which it creates the output html each time the content is changed. This can be turned off to improve performance.

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

add

Type: String

Default: top

This setting defines where content will be inserted if there is no focus in the Article. There are two options: top - at the beginning of the editor, bottom - at the end of the editor content.

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

markup

Type: String

Default: paragraph

By default, Article creates paragraph markup. This can be changed to markup div by tags, in which pressing enter will create a br tag.

To do this, you need to apply these settings:

ArticleEditor('#entry', {
    css: '/your-article-dist-path/',
    editor: {
        markup: 'text'
    },
    addbarAdd: ['text'],
    addbarHide: ['paragraph'],
    format: ['div', 'h1', 'h2', 'h3', 'ul', 'ol']
});

Now in addbar and formatting popup will be shown the insert Text block, instead of Paragraph.

You need to wrap the text blocks in a div tag with the arx-text class when you run Article so that it can parse them correctly. For example, this:

<textarea id="entry">
    <h2>...</h2>
    <div class="arx-text">...</div>
    <div class="arx-text">...</div>
</textarea>

The class of text blocks can be changed using the text.classname setting.

lang

Type: String

Default: en

By default, Article is set to English language, but you can download (or create) and install your own language file. All you need is to set a language file after article-editor.js:

<script src="/js/artilcle/article-editor.js"></script>
<script src="/js/artilcle/es.js"></script>

And then set the lang option like this:

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

scrollTarget

Type: String, Node

Default: document

If the editor is in the parent layer, which has its own scrolling, regardless of the page scrolling, then you need to specify the ID of this layer in this setting.

ArticleEditor('#entry', {
    css: '/your-article-dist-path/',
    editor: {
        scrollTarget: '#my-scroll-layer'
    }
});

direction

Type: String

Default: ltr

Article supports both right-to-left and left-to-right text directions. By default, the editor is set to work with left-to-right, to set it to right-to-left, use direction setting:

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

spellcheck

Type: Boolean

Default: true

This setting allows to turn off a browser spell checking for Article.

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

grammarly

Type: Boolean

Default: false

This option allows to turn on Grammarly spell check for Article.

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

notranslate

Type: Boolean

Default: false

This option allows to disable Google Translate to translate content of Article.

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

minHeight

Type: String

Default: 100px

This setting allows to set minimum height for the editor.

ArticleEditor('#entry', {
    css: '/your-article-dist-path/',
    editor: {
        minHeight: '300px'
    }
});

maxHeight

Type: Boolean, String

Default: false

This setting allows to set maximum height for Article.

ArticleEditor('#entry', {
    css: '/your-article-dist-path/',
    editor: {
        maxHeight: '800px'
    }
});

disabled

Type: Boolean

Default: false

If textarea with content has the disabled attribute, the editor will start in disabled mode. You can also start the editor in disabled mode by specifying it in the setting:

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

To control the disabled mode state use API methods:

• app.enable
• app.disable

enterKey

Type: Boolean

Default: true

This setting disables pressing enter key.

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

csscache

Type: Boolean

Default: false

By default, the editor marks linked CSS files with timestamp to prevent them from being cached. This can be disabled by setting true.

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