Summernote ne modifiera pas son contenu

Question

J'ai des difficultés avec summernote. J'utilise Vue en combinaison avec Laravel et le thème Inspinia ( https://wrapbootstrap.com/theme/inspinia-responsive-admin-theme-WB0R5L90S ).

J'ai chargé les fichiers .css et .js. Mon problème est que summernote ne veut pas modifier son contenu. Les boutons de la barre d'outils ne fonctionnent pas.

Voici mon composant Vue :

<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>

Il affiche un éditeur summernote avec une barre d'outils et un contenu stylisé, mais il ne déclenche pas l'événement onChange. Quelqu'un sait-il ce que je fais de mal ?

Quelques écrans qui montrent des css bizarres :

Merci pour votre effort !

Answer 1

Votre configuration summernote pour le callback est mauvaise.

Ceci :

 onChange: function(contents, editable) {
   this.infoText = contents;
   console.log(contents, editable);
 }.bind(this)

Cela devrait ressembler à ça :

callbacks: {
  onChange: function(contents, editable) {
    this.infoText = contents;
    console.log(contents, editable);
  }.bind(this)
}

Answer 2

J'ai utilisé deux parties du thème Inspinia :

• L'assistant Inspinia
• La version Inspinia de l'éditeur summernote

L'assistant, combiné à Vue, a endommagé certains éléments de Jquery. Cette jquery ratée est entrée en conflit avec la jquery de summernote.

J'ai donc écrit un assistant personnalisé avec vue et ça a marché !