Summernote wird ihren Inhalt nicht bearbeiten

Question

Ich habe Probleme mit Summernote. Ich benutze Vue in Kombination mit Laravel und dem Inspinia Thema (https://wrapbootstrap.com/theme/inspinia-responsive-admin-theme-WB0R5L90S).

Ich habe die .css und .js Datei geladen. Mein Problem ist, dass Summernote den Inhalt nicht bearbeitet. Die Schaltflächen in der Symbolleiste funktionieren nicht.

Das ist meine vue Komponente:

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

zeigt es eine summernote Editor mit Symbolleiste und gestylten Inhalt, aber es nicht ausgelöst das onChange Ereignis. Weiß jemand, was ich falsch mache?

Einige Bildschirme, die seltsame CSS zeigen:

Vielen Dank für Ihre Mühe!

Answer 1

ich verwendet, um zwei Teile des Inspinia Thema:

• Der Inspinia Assistent
• Die Inspinia Version der Summernoteneditor

Der Assistent, in Kombination mit Vue vermasselt einige der jQuery. Diese verpatzte jQuery widersprach der Summernote jQuery.

Also schrieb ich einen benutzerdefinierten Assistenten mit Vue und es hat funktioniert!

Answer 2

Sie Summerno Config für den Rückruf ist falsch.

Dies:

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

sollte wie folgt aussehen:

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