vueJSでsummernoteを使用するには？エラー：summernoteは関数ではありません

Question

vueJSでsummernoteを使用しようとしています。 Laravelの枠組みの下で。

$('#summernote_div').summernote({ 
    height: 300, // set editor height 
    minHeight: null, // set minimum height of editor 
    maxHeight: null, // set maximum height of editor 
    focus: true // set focus to editable area after initializing summernote 
}); 
console.log(summernote); 

しかし、ページだけ応答：作成（）メソッド内で、対応するvueJS文書で、

<input type="text" v-model="articleForChange.article_body" class="form-control" id="summernote_div" placeholder="Article Content"> 

その後：blade.php文書では、私はsummernot_divのIDを設定しています：

Uncaught TypeError: $(...).summernote is not a function.

は私がやって欠場何はありますか？

Answer 1

準備関数の代わりに準備関数にsummernote initを追加する必要があります。 docs状態：DOMコンパイルが開始されていないため、$ elプロパティはまだ使用できません。

また、summernoteプラグインが含まれていることを確認してください。

Answer 2

私は同じ問題がありました。

ソースが追加されていることを確認してください。 （CDNまたはダウンロードしたファイル）

<!-- include libraries(jQuery, bootstrap) --> 
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet"> 
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script> 
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script> 

<!-- include summernote css/js--> 
<link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.4/summernote.css" rel="stylesheet"> 
<script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.4/summernote.js"></script> 

その後(function ($) { //your code gooes here })(jQuery);

のようにあなたのjavascriptのコードをラップ：

(function ($) { 
$('#summernote_div').summernote({ 
    height: 300, // set editor height 
    minHeight: null, // set minimum height of editor 
    maxHeight: null, // set maximum height of editor 
    focus: true // set focus to editable area after initializing summernote 
}); 
})(jQuery); 

これは私の問題を解決します。

Answer 3

私はあなたがsummernoteライブラリを含めるのを忘れように私最初追加したファイルapp.js（INITコンポーネントのVueJS）、その後、LIB summernoteファイル

<!-- Scripts app.js VueJS --> 
<script type="text/javascript" src="{{ asset('js/app.js') }}"></script> 
... 
<!-- Summernote (Editor) --> 
<script type="text/javascript" src="{!! asset('assets/components/summernote/dist/summernote.min.js') !!}"></script> 
<script type="text/javascript" src="{!! asset('assets/components/summernote/dist/lang/summernote-en-EN.min.js') !!}"></script> 
</body> 
</html>