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

Posted 2023-03-14

【中文标题】如何在 vueJS 中使用summernote？错误：summernote 不是函数

【英文标题】：How to use summernote in vueJS? Error:summernote is not a function

【发布时间】：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。

【参考方案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>