itslit-tech / vue-redactor

Redactor Vue.js Component

Redactor Vue.js Component

Vue-redactor helps Redactor to work as a Vue.js component. The Redactor Vue component is under MIT license. However, to use this component, you should purchase a Redactor license.

Please see the buying page and License Agreement.

Compatibility

• Vue.js 2.x

Intialization

One Way Binding

Import

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

Component

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

App

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

Two Way Binding

Import

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

Component

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

App

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

Call with options

new Vue({
    el: '#app',
    data() {
        return {
            content: '<h1>Hello and welcome</h1>',
            configOptions: {
                plugins: ['table']
            }
        }
    }
});