美文网首页
summernote文本编辑器使用过程中遇到的坑

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

作者: 慢慢慢慢热 | 来源:发表于2017-11-29 10:51 被阅读463次

    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.png

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

    issue.png

    再看看我的html代码:

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

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

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

    placeholder可以正常显示了

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

    相关文章

      网友评论

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

          本文链接:https://www.haomeiwen.com/subject/cakubxtx.html