在使用 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 输入文字时拼音和汉字同时输入问题的更多相关文章

  1. Android 实现限制EditText输入文字的数量

    前段时间比较忙 没来的及时分享出来.需求是这样的要求用户只能输入12个字符或者6位中文的数据:作为一个菜鸟遇到这样的问题第一反应就是 Android:maxLength="12"这 ...

  2. cocos2d-x 在输入文字时点击语音crash

    修改CCDirectorCaller.mm文件 (cocos2dx/platform/ios/CCDirectorCaller.mm)   添加的代码: #import <OpenGLES/EA ...

  3. input输入中文时,拼音在输入框内会触发input事件的问题。

    问题描述: 监听文本输入框的input事件,在拼写汉字(输入法)但汉字并未实际填充到文本框中(选词)时会触发input事件,如图: 需要完成的需求就是在输入阶段不触发input中的事件,选词之后文字落 ...

  4. C#中实现输入汉字获取其拼音(汉字转拼音)的2种方法

    主要介绍了C#中实现输入汉字获取其拼音(汉字转拼音)的2种方法,本文分别给出了使用微软语言包.手动编码实现两种实现方式,需要的朋友可以参考下 本文刚发布时,只写了一个实现方式,使用的是微软的语言包,但 ...

  5. 解决oninput在输入中文时,会获取拼音的问题

    (1)起因:在今天做项目测试的时候发现的问题,在用微软自带的输入法的时候,输入中文,文本框会获得拼音 如图所示: (2)解决办法:经过一段时间的百度查找,最后通过这篇文章找到了解决的方法,这里给出网址 ...

  6. input输入框输入中文时,监听的input事件 屏蔽拼音状态

    $(function () { $('#jh').off().on({ //中文输入开始 compositionstart: function () { cpLock = false; }, //中文 ...

  7. input在输入中文时所触发的事件(防止输入中文时重复执行)

    一般在监听文本框输入时监听文本内容改变事件,可以使用oninput和onchange事件,两者区别在于oninput在文本输入状态可以一直监听变化,onchange在文本框失去焦点时才会触发,所以要想 ...

  8. solr入门之參考淘宝搜索提示功能优化拼音加汉字搜索功能

    首先看一下从淘宝输入搜索keyword获取到的一些数据信息: 第一张:使用拼音的全程来查询 能够看到提示的是匹配的转换的拼音的方式,看最后一个提示项 这里另一个在指定分类文件夹下搜索的功能,难道后台还 ...

  9. 限制HTML的input只能输入数字、英文、汉字...

    限制HTML的input只能输入数字.英文.汉字... 关键词:正则表达式, JavaScript, HTML, input 常用HTML正则表达式1.只能输入数字和英文的:<input onk ...

随机推荐

  1. python对影评进行评论分析,形成词云图

    1 # -*- coding:utf-8 -*-   2 '''   3 抓取豆瓣电影某部电影的评论  4抓取电影   5 网址链接:https://movie.douban.com/subject/ ...

  2. 消息队列ActiveMQ

    什么是ActiveMQ ActiveMQ 是Apache出品,最流行的,能力强劲的开源消息总线.ActiveMQ 是一个完全支持JMS1.1和J2EE 1.4规范的 JMS Provider实现,尽管 ...

  3. win7+cuda+anaconda python+tensorflow-gpu+keras安装成功版本匹配汇总

    win7+cuda+anaconda python+tensorflow-gpu+keras安装成功版本匹配汇总 2019-09-20 15:06:03 wyx100 阅读数 38更多 分类专栏: M ...

  4. sql server 学习笔记 (nested transaction 嵌套事务)

    什么时候会用到嵌套事务 ? 为了代码复用,我们会写许多的储蓄过程,而中间如果需要使用到 transaction 难免就会发生嵌套了. sql server 并不直接支持嵌套事务. 但它可以用一些招式来 ...

  5. Nginx 路由重写

    很多时候我们的真实路由是隐藏的,都经过重写后展现到前台,下面简单写两个我经常用到的几个: 一般在配置*.host(在http里面引入的server配置)的时候会用到每个不同网址的路由重写,每一个rew ...

  6. VS App_Code文件夹下的类文件不能直接被调用的解决方法

    如下图所示,新建的类不能直接使用,会显示报错,检查命名空间什么的,未果 通过百度搜索,发现这么一篇文章:https://blog.csdn.net/younghaiqing/article/detai ...

  7. “df: cannot read table of mounted file systems”.

    “df: cannot read table of mounted file systems”.“df -l” returned an error: “df: cannot read table of ...

  8. JavaScript-- 基础知识面试题

    1.JavaScript语言特点 1.弱类型,数据类型由数据的值决定 2.解释性脚本语言--解释器是JS引擎 是浏览器的一部分 3.运行在客户端浏览器上 4.有事件驱动机制(按下鼠标,移动窗口等) 5 ...

  9. 案例:selenium实现登录百度(如有验证码,需要手动输入)

    func.py https://www.cnblogs.com/andy9468/p/10899508.html baidu_login.py中(如有验证码,需要手动输入) # 导入webdriver ...

  10. Image Processing and Analysis_15_Image Registration:A survey of medical image registration——1998

    此主要讨论图像处理与分析.虽然计算机视觉部分的有些内容比如特 征提取等也可以归结到图像分析中来,但鉴于它们与计算机视觉的紧密联系,以 及它们的出处,没有把它们纳入到图像处理与分析中来.同样,这里面也有 ...