summernote 富文本编辑器限制输入字符长度
项目中需要一个比较简单的富文本编辑器,于是选中了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 富文本编辑器限制输入字符长度的更多相关文章
- summernote富文本编辑器配合validate表单验证无法进行表单提交的问题
1.使用summernote富文本编辑器提交图片到服务器 在使用bootstrap中,我们用到了summernote富文本编辑器,使用summernote将图片上传到服务器中,参考我的上篇文章http ...
- summernote富文本编辑器
下载summernote官方demo,解压,把文件夹中的summernote.js,summernote.css和font整个文件夹都放到服务器对应的项目目录里 引入summernote 所需要的bo ...
- summernote富文本编辑器的使用
最近在开发一个微信公众号的后台,微信公众号编辑的文章一直没有得到很好地适应,大多数人也是在其他的编辑软件中编辑好之后直接去复制到微信公众平台中,考虑到复制后会排版出现问题,所以给大家推荐一款很不错的W ...
- summernote(富文本编辑器)将附件与图片上传到自己的服务器(vue项目)
1.上传图片至自己的服务器(这个官方都有例子,重点介绍附件上传)图片上传官方网址 // onChange callback $('#summernote').summernote({ callback ...
- SummerNote 富文本编辑器 - Rails 集成
使用官方提供的CDN服务 将下面一段加入layout文件中 <link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css ...
- 【实践】简洁大方的summernote 富文本编辑器插件的用发——小技巧
前面说到summernote 的上传,可是我要知道怎么获取内容呀,很简单调用一下函数便可: 获取内容: $("#user-work-content").summernote(&qu ...
- Watir: Watir-WebDriver对富文本编辑器的定位于Watir是不一致的。
Watir对富文本编辑,一般可以采用b.frame().document.body.innerText = "Value you want to insert"但是Watir-We ...
- Selenium+java - 关于富文本编辑器的处理
什么是富文本编辑器? 富文本编辑器,Rich Text Editor, 简称 RTE, 是一种可内嵌于浏览器,所见即所得的文本编辑器.具体长啥样,如下图: 通过自动化操作富文本编辑器 模拟场景:在富文 ...
- 超好用的富文本编辑器Summernote的使用
官网地址 中文文档 源码下载地址 Summernote依赖于jquery和bootstrap3/4 所以用时记得引入这俩依赖 奉上引入方法(官网说的很清楚,api也很详细): <!-- in ...
随机推荐
- [CF306C]White, Black and White Again_排列组合
White, Black and White Again 题目链接:https://www.luogu.org/problem/CF306C 数据范围:略. 题解: 记得不要看错题,容易看成来回交替下 ...
- 数据库学习其一 oracle11g数据泵导入导出
一.检查环境一致性 需检查数据库客户端与服务端字符编码,以避免后续各种各样的问题 查询服务端编码 注意最好用sqlplus查询,用plsql有时候会出现查询不一致问题,如下图同一个语句在plsql和s ...
- linux下如何查看一个服务所在的安装路径?
当接手一个不是自己维护的linux服务器,我们常常会想要看看该服务器上是否安装了某个服务,这个服务安装的路径在哪? redis 是开发过程中常常会用到的一个服务,我这里就以这个服务为例,进行说明. 1 ...
- 华为精益敏捷专家:DevOps转型中的那些坑
陈军--原腾讯高级项目经理.华为精益敏捷专家 DevOps是现在非常流行的一个词,很多人都在提DevOps,在往那个方向去转,但转的时候坑特别多. 现实是很理想的,大家都觉得做了DevOps之后就会非 ...
- 系统学习机器学习之神经网络(三)--GA神经网络与小波神经网络WNN
系统学习机器学习之神经网络(三)--GA神经网络与小波神经网络WNN 2017年01月09日 09:45:26 Eason.wxd 阅读数 14135更多 分类专栏: 机器学习 1 遗传算法1.1 ...
- 怎样查看或修改网页的标题title
网页的标题一般指的是 <title>标签之间的文本节点值, 它会显示在浏览器的标签页上, 我们可以通过 document.title 来查看或修改它: document.title; // ...
- c#连接数据库SqlHelper报错
这是一个困扰了我好几天的问题,首先看一下报错信息 代码: private static string connectionString = ConfigurationManager.Connectio ...
- linux--查看磁盘空间大小使用情况
1. linux查看磁盘空间大小命令 df -h Df命令是linux系统以磁盘分区为单位查看文件系统,可以加上参数查看磁盘剩余空间信息, 命令格式: df -hl 显示格式为: 文件系统 容量 ...
- 使用Vue CLI脚手架搭建vue项目
本次是使用@vue/cli 3.11.0版本搭建的vue项目 1. 首先确保自己的电脑上的Node.js的版本是8.9版本或者以上 2. 全局安装vue/cli npm install @vue/cl ...
- 设置自己的bat运行文件-自己用,随时扩展
start "" "E:\SEST_H5" start "" "C:\Program Files\Sublime Text 3\s ...