项目中需要一个比较简单的富文本编辑器,于是选中了summernote 。
虽然比较轻量,但是在开发中也遇到了几个问题,在此记录一下。

1:样式和bootstrap冲突,初始化之后显示为:

.note-editor .note-toolbar .btn-group {
float: none !important;
margin: 0 5px;
}

加入该样式覆盖解决

2:限制输入长度,查看了官网发现并没有说到这个,经过baidu,Google,也都没有发现解决方案,于是研究了下源码

OK,this.options.maxTextLength就是我们需要的。于是设置了该参数,运行之后发现一个问题,在输入中文的情况下并没有生效,只是在英文数字的时候生效了。在Stack Overflow中查到在初始化的时候设置callback,监听onkeyup事件,获取当前值,然后判断长度后重新赋值,尝试之后发现替换之后会在末尾出现一个英文,然后在开头显示我输入的汉字。。。。可能是因为重新给div赋值text的时候光标自动到开头。

( ∙̆ .̯ ∙̆ ) mmp,放弃了。。。

summernote 富文本编辑器限制输入字符长度的更多相关文章

  1. summernote富文本编辑器配合validate表单验证无法进行表单提交的问题

    1.使用summernote富文本编辑器提交图片到服务器 在使用bootstrap中,我们用到了summernote富文本编辑器,使用summernote将图片上传到服务器中,参考我的上篇文章http ...

  2. summernote富文本编辑器

    下载summernote官方demo,解压,把文件夹中的summernote.js,summernote.css和font整个文件夹都放到服务器对应的项目目录里 引入summernote 所需要的bo ...

  3. summernote富文本编辑器的使用

    最近在开发一个微信公众号的后台,微信公众号编辑的文章一直没有得到很好地适应,大多数人也是在其他的编辑软件中编辑好之后直接去复制到微信公众平台中,考虑到复制后会排版出现问题,所以给大家推荐一款很不错的W ...

  4. summernote(富文本编辑器)将附件与图片上传到自己的服务器(vue项目)

    1.上传图片至自己的服务器(这个官方都有例子,重点介绍附件上传)图片上传官方网址 // onChange callback $('#summernote').summernote({ callback ...

  5. SummerNote 富文本编辑器 - Rails 集成

    使用官方提供的CDN服务 将下面一段加入layout文件中 <link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css ...

  6. 【实践】简洁大方的summernote 富文本编辑器插件的用发——小技巧

    前面说到summernote 的上传,可是我要知道怎么获取内容呀,很简单调用一下函数便可: 获取内容: $("#user-work-content").summernote(&qu ...

  7. Watir: Watir-WebDriver对富文本编辑器的定位于Watir是不一致的。

    Watir对富文本编辑,一般可以采用b.frame().document.body.innerText = "Value you want to insert"但是Watir-We ...

  8. Selenium+java - 关于富文本编辑器的处理

    什么是富文本编辑器? 富文本编辑器,Rich Text Editor, 简称 RTE, 是一种可内嵌于浏览器,所见即所得的文本编辑器.具体长啥样,如下图: 通过自动化操作富文本编辑器 模拟场景:在富文 ...

  9. 超好用的富文本编辑器Summernote的使用

    官网地址 中文文档 源码下载地址 Summernote依赖于jquery和bootstrap3/4   所以用时记得引入这俩依赖 奉上引入方法(官网说的很清楚,api也很详细): <!-- in ...

随机推荐

  1. [知乎]这可能是最全面的龙芯3A3000处理器评测

    这可能是最全面的龙芯3A3000处理器评测 第一千零一个人   已关注 蓬岸 Dr.Quest . https://zhuanlan.zhihu.com/p/50716952 这里面链接很全. 立党 ...

  2. 更新neo4j节点信息

    将多个属性的内容更新到节点上 def update_by_id(id,graph,**kwargs): """ 更新节点的属性 根据节点的ID来更新节点的属性,如果存在该 ...

  3. SQLite进阶-13.Autoincrement关键字

    目录 AUTOINCREMENT 是一个关键字,用于表中的字段值自动递增.我们可以在创建表时在特定的列名称上使用 AUTOINCREMENT 关键字实现该字段值的自动增加. 关键字 AUTOINCRE ...

  4. H5网页唤醒app,判断app安装

    在阅读本文之前你首先应该对js有基本对掌握,并且对Scheme,intent有一定的理解.更多的是代码 上午给朋友做了一个产品引导页,但是需要判断ios系统的TestFlight是否安装,进行了goo ...

  5. 牛客 128A 礼物 (组合计数)

    大意: n种一元的奥利奥, m种2元的奥利奥, 求花恰好k元钱购买奥利奥的方案数. 可重组合问题, 直接dp即可. #include <iostream> #include <sst ...

  6. IDEA中安装go插件,如何能够配置go SDK?

    最近在学习go语言,一个是因为区块链的技术热潮,另一个是接手的项目有用到go写多线程高并发,因此决定自学go. 第一个遇到的问题就是环境! 通过一个晚上的摸索,大概步骤如下: 在IDEA中先打开set ...

  7. 怎样获取响应头: Response Header

    1. 使用 xhr.getResponseHeader()可以获取指定响应头字段值. function getHeaderTime() { console.log(this.getResponseHe ...

  8. sql 行数据找出最大的及所有数据最大的

    SELECT @charges=ISNULL(MAX(a.maxcharge), 0.00) FROM( SELECT (SELECT MAX(maxcharge) FROM(VALUES(ilong ...

  9. 5. Java的注释,标识符、标识符的命名规范

      什么是标识符符? 凡是可以由自己命名的地方都称为修饰符. 例: 项目名 ,包名 ,类名 .方法名 2.   命名规范. ①    不可使用java关键字和保留字,但是可以包含关键字和保留字. ②  ...

  10. git冲突Pull is not possible because you have unmerged files

    本地的push和merge会形成MERGE-HEAD(FETCH-HEAD), HEAD(PUSH-HEAD)这样的引用.HEAD代表本地最近成功push后形成的引用.MERGE-HEAD表示成功pu ...