【ngx-ueditor】百度编辑器按下Shift键不触发contentChange事件
背景:基于Angular 6,引入ngx-ueditor
发现现象:如果以Shift键+任意键结尾,则ngModel会丢失包含shift键的字符
例如:输入“ABC+AB++++”,则ngModel中只能获得“ABC+AB”,丢失最后的几个+号
原因:按下Shift键不触发编辑器的contentChange事件,
但如果输入shift键+任意键后,又输入其他正常字符,触发了contentChange事件,则可以获得完整文本,
即,若不是以shift键+任意键结尾,就不存在问题
解决方案一:在保存的时候,调用ueditor的getContent()方法,赋值给,接口参数,手动获取完整文本保存
Html:
<ueditor [(ngModel)]="content" #full_content></ueditor>
定义ViewChild:
@ViewChild('full_content') full_content: UEditorComponent;
保存的时候,获取完整文本,传到接口参数:
let content = this.full_content.Instance.getContent();
缺点:每次使用ueditor插件都要在提交接口的时候,再获取一次完整文本,代码重复,且对开发人员来说,Bug修复需要修改每个使用uEditor的页面,繁琐,易出错
解决方案二: 需要修改Ueditor.all.js(V1.4.3.3版本)文件的三处位置,具体如下:
7487行:删除“|| evt.shiftKey”条件判断;
14390行:删除me.keydown事件的“ && !evt.shiftKey”条件判断;
14429行:删除me.keydown事件的“&& !evt.shiftKey”条件判断;
但由于考虑修改插件源码不利于插件维护和插件升级,故没有采取第二种方案。
参考资料:https://github.com/cipchk/ngx-ueditor/blob/master/README.md
【ngx-ueditor】百度编辑器按下Shift键不触发contentChange事件的更多相关文章
- 织梦替换ueditor百度编辑器,支持图片水印 教程
1下载ueditor百度编辑器 2 把下载的zip解压得到ueditor文件夹,把解压到的ueditor文件夹扔进你网站的include文件夹去 3 打开 /include/inc/inc_fun_f ...
- UEditor百度编辑器,工具栏上自定义添加一个普通按钮
添加一个名叫“hougelou”的普通按钮在工具栏上: 第一步:找到ueditor.config.js文件中的toolbars数组,增加一个“hougelou”字符串,然后找到labelMap数组,对 ...
- [UEditor]百度编辑器配置总结
前端配置文件ueditor.config.js 前端有两个重要的配置属性: UEDITOR_HOME_URL: 配置百度编辑器的资源目录路径,你可以手动指定此路径,默认是有URL变量指定,而URL变量 ...
- UEditor百度编辑器,工具栏自定义添加一个普通按钮
根据网上前辈提供的,还真的不错,下面也整理一下 添加一个名叫“macros”的普通按钮在工具栏上: 第一步:找到ueditor.config.js文件中的toolbars数组,增加一个“macros” ...
- ThinkPHP3.1.3 整合 UEditor百度编辑器 图片上传
第一步.前端模板实例化百度编辑器 <js file='__ROOT__/Data/UEditor/ueditor.config.js' /> <js file='__ROOT__/D ...
- Ueditor百度编辑器插件的安装
目录 插件下载地址: 1. 引入 2. 编辑器显示处 id="content" 3.底部 4.ueditor编辑器按钮配置方法 定制工具栏图标 修改配置项的方法: 插件下载地址: ...
- ueditor 百度编辑器图片上传 接 node.js 及一些前端自定义
百度编辑器 用node.js 做服务端 demo 大神已整理的 记录一下 以作参考 https://github.com/netpi/ueditor 1. 前端图片工具栏上传input file在这里 ...
- Ueditor百度编辑器中的 setContent()方法的使用
百度编辑器Ueditor所提供的setContent()方法作用是:设置或者改变编辑器里面的文字内容或html内容 函数说明:setContent(string,boolean); 参数string ...
- Ueditor百度编辑器中 setContent()方法的使用
百度编辑器Ueditor所提供的setContent()方法作用是:设置或者改变编辑器里面的文字内容或html内容 函数说明:setContent(string,boolean); 参数string ...
随机推荐
- Show Me the Code
最近在练习写Python代码,拥有150多道程序员面试题的LeetCode注重算法的实现,锻炼思维,还能在线测试代码的正确性,而Python练习册涉及到了Python实际的应用,锻炼解决问题的能力,托 ...
- Python科学计算三维可视化(整理完结)
中国MOOC<Pyhton计算计算三维可视化>总结 课程url:here ,教师:黄天宇,嵩天 下文的图片和问题,答案都是从eclipse和上完课后总结的,转载请声明. Python数据三 ...
- #python# error:UnicodeEncodeError: 'latin-1' codec can't encode character '\u2026' in position 30: ordinal not in range(256)
headers={ 'Referer':'https://www.lagou.com/jobs/lis-rds=&fromSearch=true&suginput=', 'User-A ...
- python学习三十八天常用内置函数分类汇总
python给我们提供丰富的内置函数,不用去写函数体,直接调用就可以运行,很方便快速给我提供开发所需要的函数. 1,查内存地址 id() 变量的内存地址 id() 2,输入输出 input() pr ...
- Yii2 错误 'Headers already sent.'
错误日志如下: __source__: __topic__: web category: yii\web\HeadersAlreadySentException ip: level: message: ...
- 手模手配置Eslint,看懂脚手架中的Eslint
使用ESLint前:eslint是干嘛的,我这样写有什么问题,怎么还报错了,太麻烦想去掉这个插件,脚手架中关于eslint文件里的配置是什么意思?怎么设置配置项和规则达到自己想要的检测效果呢?怎么集成 ...
- Linux Shell 脚本学习第一天: 使用grep 命令,lsusb, ps -ef, 实现树莓派(Debian OS)时检测到依赖的USB设备启动后,启动终端自动执行shell脚本
1.应用背景: 无人监测的设备,常需要设置应用程序开机启动,程序启动前需要保证调用的设备先启动,运行环境先启动. 2.test.sh部分源码 #!/bin/sh #查看桌面是否启动 while tru ...
- 《程序员的呐喊》:一个熟悉多种语言的老程序员对编程语言、开发流程、google的战略等的思考,比较有趣。 五星推荐
作者熟悉二三十种编程语言,写了20多年代码.本书是作者对编程语言.开发流程.google的战略等的思考.比较有趣. 前面部分是作者对编程语言的一些思考.作者鄙视C++, Java,面向对象.比较有趣的 ...
- BZOJ-3143/洛谷3232 游走(HNOI2013)概率DP
题意:给定n个点m条边.每条边的权值还没决定,权值大小为从1到m.从1出发每次等概率选一条出边向下走,直到走到n点停止,路径代价就是边权总和.由你来决定边权来使得上诉路径代价期望值最小. 解法:点这么 ...
- MFC程序执行过程剖析(转)
一 MFC程序执行过程剖析 1)我们知道在WIN32API程序当中,程序的入口为WinMain函数,在这个函数当中我们完成注册窗口类,创建窗口,进入消息循环,最后由操作系统根据发送到程序窗口的消息调用 ...