Summernote將不會編輯其內容

我正在與summernote一起奮鬥。我使用Vue結合laravel和Inspinia主題（https://wrapbootstrap.com/theme/inspinia-responsive-admin-theme-WB0R5L90S）。Summernote將不會編輯其內容

我已經加載了.css和.js文件。我的問題是，summernote將不會編輯它的內容。工具欄中的按鈕不起作用。

這是我的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>

它確實顯示出與工具欄和風格的內容summernote編輯器，但它不會觸發onChange事件。有人知道我在做什麼錯嗎？

有些屏幕，顯示奇怪的CSS：

感謝你的努力！

來源

2016-07-04 Ron van Asseldonk

這將是巨大的，有一個小提琴或codepen，以幫助解決此 – Jeff

我用Inspinia主題兩個部分組成：

的Inspinia嚮導
的Inspinia版本summernote編輯器

該向導，與VUE組合弄亂了一些jquery的的。這使jquery和summernote jquery發生衝突。

所以我寫了一個VUE自定義嚮導，它的工作！

來源

2016-07-11 12:35:12

您對回調的summernote配置是錯誤的。

此：

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

來源

2016-07-05 14:08:07

這沒有遺憾的工作。我仍然無法將樣式應用於內容 –

Summernote將不會編輯其內容

回答

相關問題