Summernote не отредактирует свое содержание

Question

У меня борется с summernote. Я использую Vue в сочетании с laravel и темой Inspinia (https://wrapbootstrap.com/theme/inspinia-responsive-admin-theme-WB0R5L90S).

Я загрузил файл .css и .js. Моя проблема заключается в том, что summernote не будет редактировать контент. Кнопки на панели инструментов не работают.

Это мой вю компонент:

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

Это действительно показывает редактор summernote с панелью инструментов и стилизованным содержанием, но не срабатывает событие OnChange. Кто-нибудь знает, что я делаю неправильно?

Некоторые экраны, которые показывают странные CSS:

Спасибо за ваши усилия!

Answer 1

Я использовал две части темы Inspinia:

• С помощью мастера Inspinia
• Версия Inspinia из редактор summernote

Мастер, в сочетании с vue испортил некоторые из jquery. Этот беспорядочный jquery противоречил summernote jquery.

Итак, я написал специальный мастер с vue, и это сработало!

Answer 2

Вы неправильно настроили конфигурацию для обратного вызова.

Это:

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

Должно выглядеть так:

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