summernote文本编辑器使用过程中遇到的坑

最新推荐文章于 2025-06-26 12:28:30 发布

原创最新推荐文章于 2025-06-26 12:28:30 发布 · 7k 阅读

·

4

·

CC 4.0 BY-SA版权

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

文章标签：

#summernote #javascript

JS 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了Summernote文本编辑器插件的使用经验，包括如何简单有效地获取纯文本内容及解决placeholder显示问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

summernote

summernote 是一款文本编辑器插件，基于jquery、bootstrap、fontawesome

坑

获取纯文本

官方文档只有获取html内容的api，并没有直接获取纯文本的api，如果只要纯文本的话用js或其他语言也能实现，但是可能稍微麻烦点，可能会用到正则，这里找到一个方法，简单直接方便

var text = $($("#summernote").summernote("code")).text();

我的js不怎么好，我理解是先获取html内容，然后把它当成一个jq对象，再执行jq的取文本方法，简直聪明
placeholder 明明设置了，但是不生效

我是用的是summernote0.8.8，bootstrap3.3.7，jquery3.2.1

我的代码如下：
```
<body>
<div id="summernote">
</div>

<script>
   $(function () {
       $('#summernote').summernote({
           placeholder: '请输入内容',
           tabsize: 4,
           height: 400,
           width: 1000,
           lang: 'zh-CN'
       });
   })
</script>
</body>
```
代码看起来没有任何问题，但是生成的编辑器如图：

并没有看到我设置的placeholder，他去哪儿了呢？这个时候，我把光标定位于编辑器中，按一下删除，placeholder就出来了，说明我生成的编辑器中默认多了一个空格？然后我就去作者github搜索了一番，找到了这个issue，如图这个解释

再看看我的html代码：
```
<div id="summernote">
</div>
```
符合他说的有问题的写法，于是我修改为
```
<div id="summernote"></div>
```
placeholder可以正常显示了
未完待续，使用过程中补充

评论 2

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。