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

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

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

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>

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

    这里写图片描述

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

    这里写图片描述

    再看看我的html代码:

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

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

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

    placeholder可以正常显示了

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

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值