CKEditor5 输入文字时拼音和汉字同时输入问题
在使用 CKEditor5 + vue 时,出现输入文字时,拼音和文字一起输入到编辑器到问题。与之前项目中使用 ckeditor 的区别是,这次项目是在 python 架构下局部引入 ckeditor ,写法如下:
html:
<ckeditor
id="editor"
class="notice-editor"
:editor="editor"
:config="editorConfig"
@ready="onReady"
/>
vue.js

原因(摘自某同事大牛的解释):
v-model 本质上是实现了一个名叫 value 的 prop,然后有更新时会 emit 一个 input 信号。然后 ckeditor 同时还监听了 value 这个 prop 的修改,也就是父组件如果更新了 value,ckeditor 会收到信号,同时进行一些处理(ckeditor 认为外部更新了文档内容,因此也更新自己的内容),于是导致了问题。
解决方法:
不使用 v-model ,使用官网(https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/vuejs.html)提供的 @input 绑定事件,获取编辑器的 value 则用 :value 的方式获取,写法如下:
<ckeditor
id="editor"
class="notice-editor"
:editor="editor"
:config="editorConfig"
:value="notice.content"
@ready="onReady"
@input="onEditorInput"
/>
CKEditor5 输入文字时拼音和汉字同时输入问题的更多相关文章
- Android 实现限制EditText输入文字的数量
前段时间比较忙 没来的及时分享出来.需求是这样的要求用户只能输入12个字符或者6位中文的数据:作为一个菜鸟遇到这样的问题第一反应就是 Android:maxLength="12"这 ...
- cocos2d-x 在输入文字时点击语音crash
修改CCDirectorCaller.mm文件 (cocos2dx/platform/ios/CCDirectorCaller.mm) 添加的代码: #import <OpenGLES/EA ...
- input输入中文时,拼音在输入框内会触发input事件的问题。
问题描述: 监听文本输入框的input事件,在拼写汉字(输入法)但汉字并未实际填充到文本框中(选词)时会触发input事件,如图: 需要完成的需求就是在输入阶段不触发input中的事件,选词之后文字落 ...
- C#中实现输入汉字获取其拼音(汉字转拼音)的2种方法
主要介绍了C#中实现输入汉字获取其拼音(汉字转拼音)的2种方法,本文分别给出了使用微软语言包.手动编码实现两种实现方式,需要的朋友可以参考下 本文刚发布时,只写了一个实现方式,使用的是微软的语言包,但 ...
- 解决oninput在输入中文时,会获取拼音的问题
(1)起因:在今天做项目测试的时候发现的问题,在用微软自带的输入法的时候,输入中文,文本框会获得拼音 如图所示: (2)解决办法:经过一段时间的百度查找,最后通过这篇文章找到了解决的方法,这里给出网址 ...
- input输入框输入中文时,监听的input事件 屏蔽拼音状态
$(function () { $('#jh').off().on({ //中文输入开始 compositionstart: function () { cpLock = false; }, //中文 ...
- input在输入中文时所触发的事件(防止输入中文时重复执行)
一般在监听文本框输入时监听文本内容改变事件,可以使用oninput和onchange事件,两者区别在于oninput在文本输入状态可以一直监听变化,onchange在文本框失去焦点时才会触发,所以要想 ...
- solr入门之參考淘宝搜索提示功能优化拼音加汉字搜索功能
首先看一下从淘宝输入搜索keyword获取到的一些数据信息: 第一张:使用拼音的全程来查询 能够看到提示的是匹配的转换的拼音的方式,看最后一个提示项 这里另一个在指定分类文件夹下搜索的功能,难道后台还 ...
- 限制HTML的input只能输入数字、英文、汉字...
限制HTML的input只能输入数字.英文.汉字... 关键词:正则表达式, JavaScript, HTML, input 常用HTML正则表达式1.只能输入数字和英文的:<input onk ...
随机推荐
- 阿里三面46题:java高级+数据库+网络+架构设计!含答案大赠送!
阿里一面 自我介绍 链表,数组的优缺点,应用场景,查找元素的复杂度 二叉树怎么实现的 Java中都有哪些锁 可重入锁的设计思路是什么 乐观锁和悲观锁 synchronized机制 hashmap原理, ...
- TypeScript 高级类型
⒈交叉类型(Intersection Types) 交叉类型是将多个类型合并为一个类型. 这让我们可以把现有的多种类型叠加到一起成为一种类型,它包含了所需的所有类型的特性. 例如, Person &a ...
- Win10 自定义鼠标右键菜单
1. 点击文件鼠标右键显示软件 1.1 步骤 win+R输入regedit进入注册表 定位到HKEY_CLASSES_ROOT\*\shell下 在shell创建一个你想要的右键文件 例如:Kinok ...
- go map的定义和使用 键值对存储
定义map var m map[string]int //定义map 初始化map m = make(map[string]int) //初始化map 修改map中ok 的值 m[&qu ...
- nodejs 入门学习
Node.js学习笔记——Node.js开发Web后台服务 目录 一.简介 二.搭建Node.js开发环境 2.1.安装Node.js 2.2.安装IDE开发Node.js插件 三.第一个Node ...
- ABP的UnitOfWork内部SaveChanges无效
应用层一个AppService默认是一个工作单元,默认是开启的,默认是事务的.因为应用服务方法应该是原子的且一般都会使用数据库. 但是有些情况需要关闭工作单元 1.AppService有多个操作需要操 ...
- android 自动化测试案例之 MonkeyScript
#文件名 MonkeyScript.mks #功能: 使用monkey script测试app,此案例是测试搜索功能(输入关键字,然后点击搜索按钮)#参考: http://blog.csdn.net/ ...
- Java MergeSort
Java MergeSort /** * <html> * <body> * <P> Copyright 1994-2018 JasonInternational ...
- reactnative中FlatList上拉加载更多的解决办法
项目app中用到了list滚动加载,把List做了下对比发现FlatList比较适合自己的项目,但是在实际运用中 onEndReached方法需要给定 onEndReachedThreshold的高度 ...
- 浅析web网站反向代理的配置
一.背景 最近在部署项目到web服务器上时,该项目有一个打开视频监控的功能,视频的服务器是一台内网的服务器,不允许设置外网端口访问,网站服务器和视频服务器在同一个局域网内,可以相互联通.网络拓扑图如下 ...