如何在vueJS中使用summernote？错误:summernote不是一个函数

Question

我试图在vueJS中使用summernote。在Laravel框架下。在blade.php文档中，我设置了summernot_div的id：

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

然后，在相应的vueJS文档中，在创建的()方法中：

$('#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);

但是页面只是响应

Uncaught：$(.).summernote不是函数。

我有什么好怀念的吗？

Answer 1

您应该在ready函数中添加summernote init，而不是创建的函数。因为文档状态: 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);

这解决了我的问题。