Vue JS

Article Editor has Vue Component you can see how it works and download from GitHub.

One Way Binding

Import

import '/your-article-dist-path/article-editor.min.js';
import './vue-article.js';

Component

<div id="app">
    <article-editor v-model="content" :config="configOptions"></article-editor>
    {{ content }}
</div>

App

new Vue({
    el: '#app',
    data() {
        return {
            content: '<h1>Hello and welcome</h1>',
            configOptions: {
                css: '/your-article-dist-path/'
            }
        }
    }
});

Two Way Binding

Import

import '/your-article-dist-path/article-editor.min.js';
import './vue-article.js';

Component

<div id="app">
    <article-editor v-model="content" :config="configOptions"></article-editor>
    <textarea v-model="content"></textarea>
</div>

App

new Vue({
    el: '#app',
    data() {
        return {
            content: '<h1>Hello and welcome</h1>',
            configOptions: {
                css: '/your-article-dist-path/'
            }
        }
    }
});

Call with options

new Vue({
    el: '#app',
    data() {
        return {
            content: '<h1>Hello and welcome</h1>',
            configOptions: {
                plugins: ['blockcode'],
                css: '/your-article-dist-path/',
                editor: {
                    focus: true
                }
            }
        }
    }
});

Call with events

new Vue({
    el: '#app',
    data() {
        return {
            content: '<h1>Hello and welcome</h1>',
            configOptions: {
                css: '/your-article-dist-path/',
                subscribe: {
                    'app.start': function() {
                        console.log('Article started!');
                    }
                }
            }
        }
    }
});