码迷,mamicode.com
首页 > 其他好文 > 详细

CKEditor5 输入文字时拼音和汉字同时输入问题

时间:2019-06-10 13:29:03      阅读:113      评论:0      收藏:0      [点我收藏+]

标签:监听   val   v-model   http   latest   img   pre   方式   因此   

 

  在使用 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 输入文字时拼音和汉字同时输入问题

标签:监听   val   v-model   http   latest   img   pre   方式   因此   

原文地址:https://www.cnblogs.com/zhangym118/p/10996966.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!