2017-08-25 262 views
1

我想在我的VUE JS 2溫泉使用summernote,而且由於使用summernote不是所有我的網頁,所以我讓summernote是一個組件加入使用summernote與VUE JS 2

export default { 
    editor_function(){ 
    //summernote function in summernote.min.js 
    } 
} 

,然後我就將其導入到需要summernote的.vue文件中,並在mounted()函數上調用editor_function函數,但當npm將我的vue項目編譯爲單個app.js文件時,出現錯誤unknown codemirror

所以我進入只包括summernote.min.js在我的index.html,這意味着它會在vue js spa開始之前加載(這不是很理想,因爲只有一些頁面需要這個插件,但是我也很好需要這個工作)

打完,這是工作,但現在我還是不知道如何從summernote輸出中獲取數據到vuejs,我加入V- modeltextarea這樣

<textarea class="summernote" v-model="content"></textarea> 

我也試圖做出像這樣的自定義輸入但不工作

<textarea class="summernote" 
      :value="content" 
      @input="content = $event.target.value"></textarea> 

,但它只是不綁定到我的V模型的內容,這就是意味着,當我從後summernote /內容將是空輸出...

因此如何使summernote可與VUE JS 2?我發現一些夏季筆記和vue js包,但它只適用於舊版本的vue js(v.1也許?)並且與vue js 2不兼容。

+0

您是否嘗試過[this](https://github.com/StefanNeuser/vuejs2-summernote-component),我認爲它符合您的要求。 – choasia

+0

哦,我已經看到了,它看起來很有前途,但缺乏指導,不知道如何在我自己的項目中實現它 –

回答

1

我在這裏回答,因爲註釋並不是很擅長顯示代碼。

<template> 
<div id="app"> 
    <summernote 
    name="editor" 
    :model="content" 
    v-on:change="value => { content = value }" 
    ></summernote> 
</div> 
</template> 

<script> 
export default { 
    data() { 
    return { 
     content: null 
    } 
    }, 
    components: { 
    'summernote' : require('./Summernote') 
    } 
} 
</script> 

我想你可以用這種方式使用summernote module
我查看了源代碼。它非常簡單而簡短,因爲它只是summernote的一個包裝。

更新
我分叉的項目,並改變了一些代碼,使其更易於設置summernote的配置和插件。通過this version,您可以將您的配置作爲對象支持。 您還可以通過將其導入html script標記中來添加插件。
請參閱下面的示例代碼。

<template> 
<div id="app"> 
    <summernote 
    name="editor" 
    :model="content" 
    v-on:change="value => { content = value }" 
    :config="config" 
    ></summernote> 
</div> 
</template> 

<script> 
export default { 
    data() { 
    return { 
     content: null, 
     // ↓ It is what the configuration object looks like. ↓ 
     config: { 
      height: 100, 
      toolbar: [ 
       // [groupName, [list of button]] 
       ['style', ['bold', 'italic', 'underline', 'clear']], 
       ['font', ['strikethrough', 'superscript', 'subscript']], 
       ['fontsize', ['fontsize']], 
       ['color', ['color']], 
       ['para', ['ul', 'ol', 'paragraph']], 
       ['insert', ['gxcode']], // plugin config: summernote-ext-codewrapper 
      ], 
     }, 
    } 
    }, 
    components: { 
    'summernote' : require('./Summernote') 
    } 
} 
</script> 

我希望你能明白我的想法。您還可以查看分叉項目以獲取更多信息。

+0

哇,它的工作....洙,如果我想costumize summernote,如果我想添加sumernote插件或者只是選擇出現在工具欄中的哪個按鈕/控件,我應該在哪裏寫?它在summernote模塊中嗎?因爲我看到那裏有高度屬性設置 –

+0

@LaurensiusTony我分叉項目,以適應您的要求。看到我更新的答案。 – choasia

+0

@choasia我不斷收到$ .summernote()不是一個函數。我做錯了什麼嗎? –