【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 ...
随机推荐
- sourcetree for mac 使用
1.sourceTree clone 仓库 打开sourceTree, 点击 新仓库(1) -> 从url克隆(2), 如下图 如下图所示, 粘贴源url路径, 自动补全或者手动选择目标路径和名 ...
- stl(set和map)
http://codeforces.com/gym/101911/problem/A Recently Monocarp got a job. His working day lasts exactl ...
- <转载>面试官: 讲讲MySql表设计需要注意什么?
作者:孤独烟 出处: http://rjzheng.cnblogs.com/ 综述 近期由于复习了一下MySQL的内容看到一篇比较好的文章,转载分享一下.大家看完,其实能避开很多坑.而且很多问题,都是 ...
- C# 引用类型的深度拷贝帮助类
using System; using System.Collections.Generic; using System.IO; using System.Linq; using System.Lin ...
- 独立成分分析(Independent Component Analysis)
ICA是一种用于在统计数据中寻找隐藏的因素或者成分的方法.ICA是一种广泛用于盲缘分离的(BBS)方法,用于揭示随机变量或者信号中隐藏的信息.ICA被用于从混合信号中提取独立的信号信息.ICA在20世 ...
- elasticsearch 深入 —— 相关度控制
控制相关度 处理结构化数据(比如:时间.数字.字符串.枚举)的数据库, 只需检查文档(或关系数据库里的行)是否与查询匹配. 布尔的是/非匹配是全文搜索的基础,但不止如此,我们还要知道每个文档与查询的相 ...
- A Tutorial on Using the ALSA Audio API
A Tutorial on Using the ALSA Audio API This document attempts to provide an introduction to the ALSA ...
- 2018-2-13-win10-uwp-分治法
title author date CreateTime categories win10 uwp 分治法 lindexi 2018-2-13 17:23:3 +0800 2018-2-13 17:2 ...
- 后缀自动机(SAM) 学习笔记
最近学了SAM已经SAM的比较简单的应用,SAM确实不好理解呀,记录一下. 这里提一下后缀自动机比较重要的性质: 1,SAM的点数和边数都是O(n)级别的,但是空间开两倍. 2,SAM每个结点代表一个 ...
- [CentOS]安装软件:/lib/ld-linux.so.2: bad ELF interpreter 解决
错误:/usr/local/bin/rar: /lib/ld-linux.so.2: bad ELF interpreter: No such file or directory 解决:是因为64位系 ...