Summernote在Vue中初始化后无法输入中文怎么办?

闲人雨晨 阅读 7

我在Vue项目里集成Summernote,初始化后英文能正常输入,但一打中文就卡住,候选框不出现,甚至整个编辑器变白。试过切换浏览器和更新依赖都没用。

下面是我的组件代码:

<template>
  <div id="summernote"></div>
</template>

<script>
export default {
  mounted() {
    $('#summernote').summernote({
      height: 300,
      lang: 'zh-CN'
    });
  }
}
</script>
我来解答 赞 5 收藏
二维码
手机扫码查看
1 条解答
Newb.梓玥
这个问题很常见,不是你代码写错了,而是少引了一个文件。

Summernote的 lang: 'zh-CN' 只是告诉编辑器用中文,但它需要对应的语言包才能正常工作。你只引了核心库,没引中文语言包。

解决办法很简单,引入这个js:

// 在你的summernote.js引入之后加上这个
import 'summernote/lang/summernote-zh-CN'


或者如果你是用CDN的方式:

<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/lang/summernote-zh-CN.js"></script>


注意版本号要对上,summernote和lang文件的版本必须一致。

另外提醒一下,用jQuery的方式在Vue里搞DOM操作其实不太规范,以后可以考虑换成vue-quill-editor或者tiptap这些更贴合Vue的富文本编辑器。不过当前问题按上面那样改就能解决。
点赞
2026-03-11 12:02