summernoteを使用して、私は私のVUEのjs、2つのスパでsummernoteを使用したいVUEのJS 2

Question

とsummernote、およびすべてではないので、私のページを使用するので、私は

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

を追加することにより、summernoteはコンポーネントであることを作り、ちょうど私summernoteとmounted()機能にeditor_functionを呼び出す必要がある、私の.vueファイルでそれをインポートしますが、NPM単一app.jsファイルに私のVUEプロジェクトをコンパイルするとき、私は、エラーunknown codemirrorを得ました。

私はindex.htmlにsummernote.min.jsを入れています。これは、vue js spaが起動する前に読み込まれることを意味します（このプラグインは、一部のページだけが必要なので非常に理想的ではありませんが、私はtextarea

このような

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

にそれが動作していることの後にそう

に）仕事にこれを必要とするが、今はvuejsにsummernoteからの出力に含まデータを取得する方法は考えを持っていない、私はV- modelを追加していこのようなカスタム入力を試みましたが、動作しません。

summernoteはVUEのJS 2で動作するようにする方法

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

が、それはちょうど私のVモデルのコンテンツにバインドされず、それは私がsummernote /コンテンツの出力を投稿するとき、それは空になります平均だ...

そう？私はsummernoteとvue jsのパッケージを見つけましたが、vue js 2と互換性がない古いバージョンのvue js（v.1かもしれません）のみで動作します。

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

あなたは私の考えを得ることができたらいいと思います。詳細については、フォークされたプロジェクトを参照することもできます。