资讯专栏INFORMATION COLUMN

summernote 富文本编辑器限制输入字符长度

BearyChat / 3440人阅读

摘要:在中查到在初始化的时候设置,监听事件,获取当前值,然后判断长度后重新赋值,尝试之后发现替换之后会在末尾出现一个英文,然后在开头显示我输入的汉字。。。。

项目中需要一个比较简单的富文本编辑器,于是选中了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,放弃了。。。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/107149.html

相关文章

  • summernote 文本辑器限制输入字符长度

    摘要:在中查到在初始化的时候设置,监听事件,获取当前值,然后判断长度后重新赋值,尝试之后发现替换之后会在末尾出现一个英文,然后在开头显示我输入的汉字。。。。 项目中需要一个比较简单的富文本编辑器,于是选中了summernote 。虽然比较轻量,但是在开发中也遇到了几个问题,在此记录一下。 1:样式和bootstrap冲突,初始化之后显示为:showImg(https://segmentfau...

    young.li 评论0 收藏0
  • summernote(文本辑器)将附件与图片上传到自己的服务器(vue项目)

    摘要:将创建好的对象,再插入到编辑器中注意这里不用方法因为他会额外的标签具体查看,另外当选取本地文件的时候,此时的富文本编辑器会失去焦点,插入新的节点的时候,总是从起始点开始插入,而非从当前光标的位置进行插入。 1.上传图片至自己的服务器(这个官方都有例子,重点介绍附件上传)图片上传官方网址 // onChange callback $(#summernote).summernote({ ...

    wqj97 评论0 收藏0
  • summernote(文本辑器)将附件与图片上传到自己的服务器(vue项目)

    摘要:将创建好的对象,再插入到编辑器中注意这里不用方法因为他会额外的标签具体查看,另外当选取本地文件的时候,此时的富文本编辑器会失去焦点,插入新的节点的时候,总是从起始点开始插入,而非从当前光标的位置进行插入。 1.上传图片至自己的服务器(这个官方都有例子,重点介绍附件上传)图片上传官方网址 // onChange callback $(#summernote).summernote({ ...

    xiaoxiaozi 评论0 收藏0
  • 基于SpringBoot的仿微信扫描登陆+轻量级文本编辑->文章系统

    摘要:微信的扫码的登陆是要企业号的,对于一个学生狗哪来企业号,自己有个测试号内心已十分满足。自己决心做一个仿微信扫码登陆,对,你没看错,就是仿,坚信高仿出奇迹。 前言 点击访问项目链接看到慕课网和segmentfault的发表手记和发表文章是Markdown 编辑器,说实话,对于第一次用的我真的很不习惯。不过对于我们代码开发者来写挺好的,也就对我们这些开发者述写自己的代码故事好点而已。这边我...

    MyFaith 评论0 收藏0
  • 代码小记:tinymce使用心得

    摘要:简单使用直接使用可以使用这种方式,方便快捷。但是满足不了大部分人,你们需要的是自定义使用手册传送门速查传送门手脚架提供给看完文档后无从下手的伙伴,这配置够用了。本地化语言包下载传送门语言包下载后放到目录下方可使用。 序 公司后台的编辑器从我刚接触的bootstrap-wysihtml5更新到summernote,后来发现summernote也是巨坑无比(坑:粘贴没有过滤、插件结构最近又...

    GT 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<