背景:基于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事件的更多相关文章

  1. 织梦替换ueditor百度编辑器,支持图片水印 教程

    1下载ueditor百度编辑器 2 把下载的zip解压得到ueditor文件夹,把解压到的ueditor文件夹扔进你网站的include文件夹去 3 打开 /include/inc/inc_fun_f ...

  2. UEditor百度编辑器,工具栏上自定义添加一个普通按钮

    添加一个名叫“hougelou”的普通按钮在工具栏上: 第一步:找到ueditor.config.js文件中的toolbars数组,增加一个“hougelou”字符串,然后找到labelMap数组,对 ...

  3. [UEditor]百度编辑器配置总结

    前端配置文件ueditor.config.js 前端有两个重要的配置属性: UEDITOR_HOME_URL: 配置百度编辑器的资源目录路径,你可以手动指定此路径,默认是有URL变量指定,而URL变量 ...

  4. UEditor百度编辑器,工具栏自定义添加一个普通按钮

    根据网上前辈提供的,还真的不错,下面也整理一下 添加一个名叫“macros”的普通按钮在工具栏上: 第一步:找到ueditor.config.js文件中的toolbars数组,增加一个“macros” ...

  5. ThinkPHP3.1.3 整合 UEditor百度编辑器 图片上传

    第一步.前端模板实例化百度编辑器 <js file='__ROOT__/Data/UEditor/ueditor.config.js' /> <js file='__ROOT__/D ...

  6. Ueditor百度编辑器插件的安装

    目录 插件下载地址: 1. 引入 2. 编辑器显示处 id="content" 3.底部 4.ueditor编辑器按钮配置方法 定制工具栏图标 修改配置项的方法: 插件下载地址: ...

  7. ueditor 百度编辑器图片上传 接 node.js 及一些前端自定义

    百度编辑器 用node.js 做服务端 demo 大神已整理的 记录一下 以作参考 https://github.com/netpi/ueditor 1. 前端图片工具栏上传input file在这里 ...

  8. Ueditor百度编辑器中的 setContent()方法的使用

    百度编辑器Ueditor所提供的setContent()方法作用是:设置或者改变编辑器里面的文字内容或html内容 函数说明:setContent(string,boolean); 参数string ...

  9. Ueditor百度编辑器中 setContent()方法的使用

    百度编辑器Ueditor所提供的setContent()方法作用是:设置或者改变编辑器里面的文字内容或html内容 函数说明:setContent(string,boolean); 参数string ...

随机推荐

  1. Maven仓库存在jar包但依旧提示无法下载

    介绍最近服务器的迁移,把原来服务器的地址都更改了,所以私服的地址也改动了,原来项目下载到本地仓库的包,但是重新构建过程中竟然发现依然要提示下载,本地仓库里面明明有包,为什么还要下载? 解决去maven ...

  2. python常用模块(3)

    hashlib模块 hashlib提供了常见的摘要算法,如md5和sha1等等. 那么什么是摘要算法呢?摘要算法又称为哈希算法.散列算法.它通过一个函数,把任意长度的数据转换为一个长度固定的数据串(通 ...

  3. JsonView视图

    同一个对象,在不同的场景,返回不同的属性,如getUserById返回User对象包含password值,而getAllUsers返回User集合,不包含password值(通过接口查看显示,序列化的 ...

  4. Codeforces 1162E Thanos Nim(博弈)

    一道有意思的博弈题.首先我们考虑一种必败情况,那就是有一方拿光了一堆石子,显然对方是必胜,此时对方可以全部拿走其中的n/2,那么轮到自己时就没有n/2堆,所以此时是必败态.我们先对所有石子堆sort, ...

  5. Codeforces - 1195D1 - Submarine in the Rybinsk Sea (easy edition) - 水题

    https://codeforc.es/contest/1195/problem/D1 给\(n\)个等长的十进制数串,定义操作\(f(x,y)\)的结果是"从\(y\)的末尾开始一个一个交 ...

  6. python学习三十八天常用内置函数分类汇总

    python给我们提供丰富的内置函数,不用去写函数体,直接调用就可以运行,很方便快速给我提供开发所需要的函数. 1,查内存地址 id() 变量的内存地址 id() 2,输入输出 input()  pr ...

  7. Codeforces 1156D 0-1-Tree ( 并查集 || 树形DP )

    <题目链接> 题目大意: 给定一颗无向树,树的边权只要0/1两种情况,现在问你这棵树上存在多少对有序对<u,v>,满足u-->v的路径上,如果出现边权为1的边之后,就不能 ...

  8. k3 cloud成本调整单提示期末余额不存在调整单分录的维度,请先出库核算确认是否存在核算维度的数据

    成本调整单提示期末余额不存在调整单分录的维度,请先出库核算确认是否存在核算维度的数据,如下图所示: 解决办法:先做出库核算,然后做成本调整单,再做出库核算(出库成本核算)

  9. 20191114PHP文件操作

    <meta charset="utf-8"><?php// $fn=fopen("c:\\abc.txt","w"); / ...

  10. docker:python与docker

    一:环境准备 pycharm:专业版(windows) docker ce 免费版(ubantu16.04) os: os:防火墙 二:开发流程 pycharm中开发环境搭建的工作原理: 1. pyc ...