如何在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文档中，在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);

但这个页面只是返回了响应：

未捕获的类型错误：$(...).summernote不是一个函数。

我有什么遗漏的吗？

- Emily

---

看起来你忘记了包含summernote库。 你在使用vueify吗？ 你能发布剩下的HTML吗？ - bazi

你可能没有调用脚本标签来解决Summernote。请尝试查看控制台中的网络选项卡，查看哪些JS库已加载，以及是否已加载SummerNote。 - Gokigooooks

Answer 1

我遇到了同样的问题，

请确保您已添加源（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);

这解决了我的问题。

- Mohammed Shiyas

Answer 2

你应该在 ready 函数中添加 summernote 的初始化，而不是 created 函数。正如 文档 所述：DOM 编译尚未开始，$el 属性尚不可用。

同时确保已经包含了 summernote 插件。

- Nora

Answer 3

当我首先添加文件app.js（初始化组件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>

- Dariusz Andryskowski