Documentation

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', {
    editor: {
        focus: true
    }
});

classname #

Type: String

Default: arx-content

This setting specifies the parent class for content styles within the editor.

By default, styles are written in CSS of the editor in the following way:

.arx-content p {}
.arx-content .align-left {}
etc.

So, to add your styles, you need to create a CSS file and connect it after CSS of the editor. In this file you can write styles like this:

.arx-content .my-class {}
.arx-content p.my-paragraph {}
etc.

You can change the setting to your class, like this:

ArticleEditor('#entry', {
    editor: {
        classname: 'my-post'
    }
});

Now to change the styles of the editor you need to create a CSS file and connect it after CSS of the editor. In this file you can write styles like this:

.my-post p {}
.my-post .align-left {}
.my-post .my-class {}
etc.

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', {
    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', {
    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', {
    editor: {
        direction: 'rtl'
    }
});

spellcheck #

Type: Boolean

Default: true

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

ArticleEditor('#entry', {
    editor: {
        spellcheck: false
    }
});

grammarly #

Type: Boolean

Default: false

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

ArticleEditor('#entry', {
    editor: {
        grammarly: true
    }
});

notranslate #

Type: Boolean

Default: false

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

ArticleEditor('#entry', {
    editor: {
        notranslate: true
    }
});

minHeight #

Type: Boolean, String

Default: false

This setting allows to set minimum height for the editor.

ArticleEditor('#entry', {
    editor: {
        minHeight: '300px'
    }
});

maxHeight #

Type: Boolean, String

Default: false

This setting allows to set maximum height for Article.

ArticleEditor('#entry', {
    editor: {
        maxHeight: '800px'
    }
});

undoredo #

Type: Boolean

Default: false

By default, the Undo & Redo buttons are turned off. To make them appear in the toolbar, use this setting, like this:

ArticleEditor('#entry', {
    editor: {
        undoredo: true
    }
});

shortcutsPopup #

Type: Boolean

Default: true

This setting allows to disable to show the keyboard shortcuts button and its popup.

ArticleEditor('#entry', {
    editor: {
        shortcutsPopup: false
    }
});