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

summernote

summernote 是一款文本编辑器插件,基于jquerybootstrapfontawesome

  1. 获取纯文本

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

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

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

  2. placeholder 明明设置了,但是不生效

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

    我的代码如下:

    <body>
    <div id="summernote">
    div>
    
    <script>
       $(function () {
           $('#summernote').summernote({
               placeholder: '请输入内容',
               tabsize: 4,
               height: 400,
               width: 1000,
               lang: 'zh-CN'
           });
       })
    script>
    body>

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

    summernote文本编辑器使用过程中遇到的坑_第1张图片

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

    summernote文本编辑器使用过程中遇到的坑_第2张图片

    再看看我的html代码:

    <div id="summernote">
    div>

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

    <div id="summernote">div>

    placeholder可以正常显示了

  3. 未完待续,使用过程中补充

你可能感兴趣的:(JS)