我试图在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不是函数。
我有什么好怀念的吗?
发布于 2016-08-19 12:18:56
您应该在ready函数中添加summernote init,而不是创建的函数。因为文档状态: DOM编译尚未启动,$el属性还不可用。
另外,请确保您已经包含了summernote插件。
发布于 2017-07-05 12:51:23
我也有同样的问题,
确保您添加了源。(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);这解决了我的问题。
https://stackoverflow.com/questions/39031080
复制相似问题