Css

css

Editing in Article works inside iframe, so the editor must know where the style files are. Styles consist of two files:

• Frame styles arx-frame.min.css
  • These styles provide a display of editing controls and are always required.
• Content styles arx-content.min.css
  • These styles are responsible for the appearance of the content and can be replaced by those needed in your case.

By default, all you need to do is to specify the css setting when running Article with the path to the directory where the distribution files with minified style files arx-frame.min.css and arx-content.min.css are located.

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

Article will automatically connect two style files from the specified directory.

The arx-content.min.css file contains the standard styles for html tags, so if you edit plain text for a blog or an article using the editor, this is enough to visually display the final result. If not see the setting below.

custom-css

You can customize the styles so that the content looks exactly as it should be on your website or in your application.

First, you can replace arx-content.min.css with your own styles. In this case you change the content of the file and run Article with the default setting:

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

Secondly, you can manually specify which style files to connect. For example, you can connect a css file of site styles and google font css:

ArticleEditor('#entry', {
    css: ['/article-dist/arx-frame.min.css'],
    custom: {
        css: [
            'https://fonts.googleapis.com...',
            '/mystyle/my-content.css',
        ]
    }
});

As you can see in the example above, you must always connect the file arx-frame.min.css to display the editing controls.

As a result, three files will be connected inside the frame to display the content:

<link rel="stylesheet" href="/article-dist/arx-frame.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com...">
<link rel="stylesheet" href="/mystyle/my-content.css">

You can see how to connect styles in different frameworks:

• Bootstrap Content
• Bulma Content
• UIkit Content

plugin-css

Sometimes a plugin you create may require a special display of your content when editing. You can do this in the same way as with styles to connect this plugin file:

ArticleEditor('#entry', {
    plugins: ['myplugin']
    css: ['/your-article-dist-path/arx-frame.min.css'],
    custom: {
        css: [
            '/mystyle/my-content.css',
            '/path/to/myplugin/css/myplugin-frame.css'
        ]
    }
});

custom-js

The interactive elements of your page can work right when editing content. To do this, you can connect javascript of your page or framework in Article:

ArticleEditor('#entry', {
    css: ['/your-article-dist-path/arx-frame.min.css'],
    custom: {
        css: ['/mystyle/my-content.css'],
        js: ['/path/to/js/my-file.js']
    }
});

The js file will be connected inside the Article frame:

<script src="/path/to/js/my-file.js"></script>

The js files are connected inside the frame using the tag script and for this you can specify attributes this way:

ArticleEditor('#entry', {
    css: '/your-article-dist-path/',
    custom: {
        js: [{
            src: '/path/to/js/my-file.js',
            type: 'module'
        }]
    }
});

As a result, the file will be connected inside the frame:

<script src="/path/to/js/my-file.js" type="module"></script>

Here are examples of JS connection in different frameworks:

• Bootstrap Carousel
• Bulma Slideshow