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

2017-11-29 本文已影响463人慢慢慢慢热

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>

代码看起来没有任何问题，但是生成的编辑器如图：

summernote.png

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

issue.png

再看看我的html代码：

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

符合他说的有问题的写法，于是我修改为

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

placeholder可以正常显示了

未完待续，使用过程中补充

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

summernote

坑

猜你喜欢

热点阅读