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

最新推荐文章于 2024-06-19 16:02:38 发布

韩未默

最新推荐文章于 2024-06-19 16:02:38 发布

阅读量6.7k

点赞数 4

分类专栏： JS 文章标签： summernote javascript

本文链接：https://blog.csdn.net/u010978840/article/details/78662894

版权

JS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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可以正常显示了
未完待续，使用过程中补充