Search code examples
javascriptjquerycssvue.jssummernote

Summernote will not edit its content

I am having struggles with summernote. I am using Vue in combination with laravel and the Inspinia theme (https://wrapbootstrap.com/theme/inspinia-responsive-admin-theme-WB0R5L90S).

I've loaded the .css and .js file. My problem is, that summernote won't edit it's content. The buttons in the toolbar are not working.

This is my vue component:

<style>
</style>
<template>
    <div>
        <div class="ibox-content no-padding">
            <div class="summernote" v-el:summernote>
                {{ infoText }}
            </div>

        </div>
    </div>
</template>
<script>
    export default  {
        data() {
            return {
                infoText: ''
            }
        },

        ready() {
            this.setupSummernote();
        },

        methods: {
            setupSummernote() {
                $(this.$els.summernote).summernote({
                    height: 250,
                    toolbar: [
                        ['style', ['style']],
                        ['font', ['bold', 'italic', 'underline', 'clear']],
                        ['color', ['color']],
                        ['para', ['ul', 'ol', 'paragraph']],
                        ['height', ['height']],
                        ['table', ['table']]
                    ],
                    onChange: function(contents, editable) {
                        this.infoText = contents;
                        console.log(contents, editable);
                    }.bind(this)
                });
            }
        }
    }
</script>

It does show a summernote editor with toolbar and styled content, but it does not fire the onChange event. Does anybody know what I'm doing wrong?

Some screens that show weird css: Creating table Font style selection

Thanks for your effort!

Solution

  • I used two parts of the Inspinia theme:

    • The Inspinia wizard
    • The Inspinia version of the summernote editor

    The wizard, in combination with vue messed up some of the jquery. This messed up jquery conflicted with summernote jquery.

    So I wrote a custom wizard with vue and it worked!