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文档中，在created（）方法中：

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

但页面只是响应：

未捕获TypeError：$（...）。summernote不是函数。

我有什么吗？

Answer 1

您应该在ready函数中添加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>

然后将您的javascript代码包装在(function ($) { //your code gooes here })(jQuery);

中

像：

(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

当我第一次添加文件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>

如何在vueJS中使用summernote？错误：summernote不是函数

3 个答案: