Menu
Redactor
Documentation / Get Started

Vue setup

Single editor #

Redactor can work as a Vue3 component. Below is a complete example. Use it to modify it for your needs. 


<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue Redactor</title>
    <link rel="stylesheet" href="/redactor.css">
</head>
<body>
<div id="app">
    <Redactor :config="configOptions"></Redactor>
    {{ content }}
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<script src="/redactor.js"></script>
<script>
const app = Vue.createApp();
app.component('Redactor', {
   template: '<textarea ref="redactor" />',
   redactor: false,
   props: {
       config: {
           default: {
             content: '<p>...</p>',
           },
           type: Object
       }
   },
   watch: {
       value(newValue, oldValue) {}
   },
   mounted() {
       this.init();
   },
   beforeDestroy() {
       this.destroy()
   },
   methods: {
       init() {
           var me = this;
           var subscribe = {
               'editor.change': function(html) {
                   me.handleInput(html);
                   return html
               }
           };

           // extend config
           if (typeof this.config.subscribe === 'undefined') {
               this.config.subscribe = subscribe;
           }
           else {
               this.config.subscribe.changed = subscribe.changed;
           }

           // call Redactor
           var app = Redactor(this.$refs.redactor, this.config);

           // set instance
           this.redactor = app;
           this.$parent.redactor = app;
       },
       destroy() {
           // Call destroy on redactor to cleanup event handlers
           this.$refs.redactor.destroy();

           // unset instance for garbage collection
           this.redactor = null;
           this.$parent.redactor = null;
       },
       handleInput(val) {
           this.$emit('input', val);
       }
   }
});

app.mount('#app');
</script>
</body>
</html>

Multiple editors #

This example shows how to make a Vue component Redactor so that you can run multiple instances of the editor on a page. 


<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue Redactor</title>
    <link rel="stylesheet" href="/redactor.css">
</head>
<body>
<div id="app">
    <Redactor :config="configOptions" :content="content1"></Redactor>
    <br><br>
    <Redactor :config="{ plugins: ['emoji'] }" :content="content2"></Redactor>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<script src="/redactor.js"></script>
<script src="/your-folder-to-plugin/emoji.js"></script>

<script>
const app = Vue.createApp({
    data() {
        return {
            configOptions: {},
            content1: '<p>Hello world 1!</p>',
            content2: '<p>Hello world 2!</p>'
        };
    }
});
app.component('Redactor', {
    template: '<textarea ref="redactor"></textarea>',
    props: {
        config: Object,
        content: String
    },
    mounted() {
        this.init();
    },
    beforeUnmount() {
        this.destroy();
    },
    methods: {
        init() {
            const config = {
               ...this.config,
               content: this.content,
               subscribe: {
                   'editor.change': html => {
                       this.handleInput(html);
                       return html;
                   }
               }
           };

            // Init Redactor
            this.redactor = Redactor(this.$refs.redactor, config);

        },
        destroy() {
            if (this.redactor) {
                this.redactor.destroy();
            }
        },
        handleInput(val) {
            this.$emit('input', val);
        }
    }
});

app.mount('#app');
</script>
</body>
</html>