Examples

Vue Component

    This is example shows how to call Redactor as a Vue.js Component. See the component on Github.

    Demo


    Code

    <!DOCTYPE html>
    <html>
    <head>
        <title>Redactor</title>
        <meta charset="utf-8">
    
        <!--css -->
        <link rel="stylesheet" href="/your-folder/redactor.css" />
    </head>
    <body>
        <!-- Two Way Binding -->
        <div id="app">
            <Redactor v-model="content" placeholder="Type here..." :config="configOptions" />
            <textarea v-model="content"></textarea>
        </div>
    
        <!-- One Way Binding -->
        <div id="app">
            <Redactor v-model="content" :config="configOptions" />
            {{ content }}
        </div>
    
        <!-- redactor.js -->
        <script src="/your-folder/redactor.js"></script>
    
        <!-- vue.js -->
        <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    
        <!-- redactor vue component -->
        <script src="/your-folder/vue-redactor.js"></script>
    
        <!-- app -->
        <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    content: '<h1>Hello and welcome</h1>',
                    configOptions: {}
                }
            }
        });
    
        // set settings
        new Vue({
            el: '#app',
            data() {
                return {
                    content: '<h1>Hello and welcome</h1>',
                    configOptions: {
                        plugins: ['table']
                    }
                }
            }
        });
        </script>
    
    </body>
    </html>