背景:基于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. 最长连续公共子序列(LCS)与最长递增公共子序列(LIS)

    最长公共子序列(不连续) 实际问题中也有比较多的应用,比如,论文查重这种,就是很实际的一个使用方面. 这个应该是最常见的一种了,不再赘述,直接按照转移方程来进行: 按最普通的方式就是,直接构造二维矩阵 ...

  2. 认识requests库,以及安装方法

    1.学习requests库有什么意义 1)对我来说,我是测试人员,我用它来解决HTTP接口自动化测试 2)写爬虫需要用到requests 3)如果是开发人员,需要些接口,了解requests有助于掌握 ...

  3. HTML5--sessionStorage、localStorage、manifest

    sessionStroage: <!DOCTYPE html> <html lang="en"> <head> <meta charset ...

  4. Python 根据入栈顺利判定出栈顺序

    1.读取入栈,出栈数据: 2.把数据分别转化成整数列表: 3.新建栈列表,用入栈数据进行压栈:如果栈列表不为空,并且栈顶层数据为出栈的元素:删除栈列表的顶层数据: 4.如果栈列表不为空,说明栈列表里面 ...

  5. Kubernetes V1.16.2部署Dashboard V2.0(beta5)

    Kubernetes V1.16.2部署Dashboard V2.0(beta5) 在Master上部署Dashboard 集群安装部署请看安装Kubernetes V1.16.2 kubectl g ...

  6. [SOL] #148. 数字格子问题

    说实话这题确实挺菜的... 废话少说,直接上代码^O^ Code: #include <bits/stdc++.h> using namespace std; inline int rea ...

  7. Java 8实战之读书笔记五:超越Java 8

    四.超越Java 8 第13章 函数式的思考 下面是这一章中你应该掌握的关键概念.      从长远看,减少共享的可变数据结构能帮助你降低维护和调试程序的代价.      函数式编程支持无副作用的 ...

  8. smbstatus - 报告当前 samba 的联接状态

    总览 smbstatus [-b] [-d] [-L] [-p] [-S] [-s configuration file] [-u username] 描述 此程序是 samba 套件的一部分. sm ...

  9. XC6SLX45T-2FGG484C 原厂订购 原装正品

    作为一家科研公司,保证的原厂品质和正规采购渠道是科学严谨的研发工作中重要的一环,更是保证研发产品可靠.稳定的基础.而研发中所遇到的各种不可预测的情况更是每个工程师向技术的山峰攀登中时会遇到的各种难题. ...

  10. 微信小程序(18)-- 自定义头部导航栏

    最近做的项目涉及相应的页面显示相应的顶部标题,所以就需要自定义头部导航了. 首先新建一个顶部导航公用组件topnav,导航高度怎么计算? 1.wx.getSystemInfo 和 wx.getSyst ...