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

问题描述：

我想在vueJS中使用summernote。在Laravel框架下。在blade.php文件，我已经设置summernot_div的ID：如何在vueJS中使用summernote？错误：summernote不是函数

<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 TypeError: $(...).summernote is not a function.

有什么我错过吗？

看起来你忘了包括summernote库。你使用vueify吗？你可以发布剩下的html吗？ – bazi

您可能没有调用script标签来解析summernote。尝试查看控制台中的网络选项卡，查看哪些js库和加载以及是否加载了夏季笔记。 – Gokigooooks

答

您应该在ready函数中添加summernote init而不是创建的函数。正如docs状态：DOM编译尚未启动，并且$ el属性将不可用。

还要确保你已经包含了summernote插件。

答

我有同样的问题，

请确保您添加了源代码。（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);

这解决我的问题。

答

我解决了这个问题，当我第一次加入文件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不是函数

相关推荐