【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

转载于:https://www.cnblogs.com/alwaysblog/p/11283752.html

【ngx-ueditor】百度编辑器按下Shift键不触发contentChange事件相关推荐

ueditor百度编辑器常见报错的解决方法
如果是第一次使用ueditor百度编辑器,或者对它不熟悉的情况下使用,会出现一些常见问题和报错.怎么使用建议参考ueditor官网,这里只谈一些常见错误. 问题:'UE' is not defind ...
百度在线编辑器显示html,UEditor百度编辑器中JS/html代码（script标签）被过滤的解决办法...
作为一名程序员,在文章中经常会插入各种代码,大部分代码都不会发生问题,但div和script标签是经常会被使用到的. 而在之前的文章编写过程中,插入JS代码后,第一次文章会显示正常,而之后在后台编辑器 ...
Vue使用UEditor百度编辑器，上传图片服务配置问题，查看版本
文章目录 Vue使用UEditor百度编辑器,上传图片服务配置问题,查看版本 1.前言 2.环境配置 3.查看版本 4.配置demo 4-1.制作demo模块 4-2.配置后端服务 4-3.重启Tom ...
黑客攻击最短代码大揭秘！不要问，问就是5下shift键
Python实战社群 Java实战社群长按识别下方二维码,按需求添加扫码关注添加客服进Python社群▲ 扫码关注添加客服进Java社群▲ 作者丨Caesar 来源丨手机电脑双黑客(heike ...
vue el-checkbox按下shift键实现批量选择数据
目录 1.先看下效果 2.代码分析 1.添加html代码,先将列表写出来 2.初始化数据:给原数据添加index属性 3.设置一个flag记录是否按下了shift键,通过监听键盘按下和松开给flag赋 ...
0x8000 GetKeyState(VK_SHIFT); 判断是否有按下shift键
0x8000 & GetKeyState(VK_SHIFT); 这句是判断是否有按下shift键为什么GetAsyncKeyState()& 首先说明,有好多程序或书上是0x8000 ...
ueditor百度编辑器destoon的word图片转存功能
destoon6.0或destoon7.0整合ueditor百度编辑器后,需要把word中的图片直接复制到编辑器,然后点击转存按钮,即可批量保存上传,如下图新版的百度编辑器可能要修改ueditor. ...
Day10 -- JavaScript实现按下 Shift 键后进行多选操作的功能
实现效果需求分析通过shift键实现连续多选功能按下shift的同时点击A复选框,然后在点击B复选框,A,B之间的复选框都被勾选上或者是先点击A复选框,再按下shift键点击B复选框,A,B之 ...
Ueditor百度编辑器中的 setContent()方法的使用
百度编辑器Ueditor所提供的setContent()方法作用是:设置或者改变编辑器里面的文字内容或html内容函数说明:setContent(string,boolean); 参数string ...

【ngx-ueditor】百度编辑器按下Shift键不触发contentChange事件

【ngx-ueditor】百度编辑器按下Shift键不触发contentChange事件相关推荐

最新文章

热门文章