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

【问题标题】：How to use summernote in vueJS? Error:summernote is not a function如何在 vueJS 中使用summernote？错误：summernote 不是函数
【发布时间】：2016-12-26 03:28:36
【问题描述】：

我正在尝试在 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 不是函数。

有没有什么事情我不想做？

【问题讨论】：

看起来您忘记包含 Summernote 库。你在用 vueify 吗？您可以发布其余的 html 吗？
你可能没有调用脚本标签来解析summernote。尝试在控制台中查看您的网络选项卡，以查看哪些 js 库并已加载，以及是否已加载 Summer Note。

标签： php laravel vue.js summernote

【解决方案1】：

您应该在 ready 函数中添加 summernote init 而不是 created。如docs 状态：DOM 编译尚未开始，$el 属性将不可用。

还要确保您已包含 Summernote 插件。

【讨论】：

【解决方案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);

这解决了我的问题。

【讨论】：

【解决方案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>

【讨论】：