kindeditor的使用心得

最新推荐文章于 2024-07-30 11:24:32 发布

WHSWXR

最新推荐文章于 2024-07-30 11:24:32 发布

阅读量1.8k

点赞数

分类专栏： kindeditor插件文章标签： JavaScript html 前端开发

本文链接：https://blog.csdn.net/laotansuancaizi/article/details/75316186

版权

kindeditor插件专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.在消息输入框输到2048个字符后，无法对输入框的文字进行全选、复制和粘贴操作；

问题描述：

当输入框字符数达到2048的时候，每次触发键盘事件，监听键盘事件的回调函数中，会有两块逻辑被触发：我们称逻辑块一和二为：BLOCK1和BLOCK2。BLOCK1是：立即判断键盘事件的keyCode是否符合（上下左右，ctrl+a,ctrl+x,ctrl+c,ctrl+v）,如果否，则会禁止浏览器的默认行为；BLOCK2是截取超过2048的字符，并且对选择区和光标状态进行处理。
问题定位：

当用户按下ctrl+C的时候，会触发两次键盘事件的监听回调，第一次是ctrl,第二次是Ctrl+C,我们需要的是第二次，要避免的是ctrl键触发的回调对选择区和光标的影响。

BLOCK2缺少对于Ctrl键的判断，导致用户每次触发组合键的时候，ctrl所触发的回调回将选择区清空。从而导致第二次ctrl+C的触发的回调不能达到预期效果。

问题解决：

当输入框字符数达到2048的时候，每次触发键盘事件，在BLOCK1中，添加对于：ctrl+a,ctrl+x,ctrl+c,ctrl+v组合键盘的判断；（在判断组合键的时候，禁止掉单独的A,X,C,V这四个按键，因为这四个按键属于字符按键，会将相应的字符输入进输入框中。）；在BLOCK2中对CTRL键进行禁止，避免对光标和选择区的状态的干扰。

2.输入框的消息为空时，多次点击Enter键，出现光标下移

问题定位：

Enter键的默认动作是换行，安通+ 输入框目前的Enter键是发送，并没有换行的作用。但是，此处未将Enter键的默认行为禁止。就会出现默认换行，等发送之后，又将换行清空，看起来的现象：光标迅速下移，又恢复。

解决方案：

在出发Enter键盘的时候，禁止掉默认行为。

3.输入表情+字符，删除字符时会将字符前的一个表情一同删除。
问题定位：

这个问题的出现是因为要解决：插件原生bug---回退行需要两次backspace. 针对这个问题，当时的解决方法是：遇到需要回退换行的地方（光标在行的首部，且触发backspace）除了浏览器自身的行为会触发之外，插件还会自动的回退一个字符。

而当光标前面有表情时候，光标对于行首的判断就会出错。

解决思路：

当光标所在的前面是一个表情(image)和一个字符（text）的时候,屏蔽回退两次的行为。

4.在消息输入框输入到2048个字符后，点击“Ctrl+Enter”键换行，滚动条滚动到最上方且最后一个字不显示；

问题定位：

目前插件的换行禁止了浏览器的默认行为，采用插入一个<br/ > 和 \u200B。插入的这两个字符对导致计算的长度加1.

问题解决：

类似于微信的行为，当输入的字符为2048长度的时候，换行的行为：不仅禁止掉浏览器默认行为，而且不插入<br/ > 和 \u200B

5.在消息输入框输到2048个字符后，无法对输入框的文字进行全选、复制和粘贴操作；

问题描述：

问题定位：

当用户按下ctrl+C的时候，会有出发两次键盘的监听回调，第一次是ctrl,第二次是Ctrl+C,我们需要的是第二次，要避免的是ctrl键触发的回调对选择区和光标的影响。

问题解决：

当输入框字符数达到2048的时候，每次触发键盘事件，在BLOCK1中，添加对于：ctrl+a,ctrl+x,ctrl+c,ctrl+v组合键盘的判断；

在判断组合键的时候，禁止掉单独的A,X,C,V这四个按键，因为这四个按键属于字符按键，会将相应的字符输入进输入框中。

在BLOCK2中对CTRL键进行禁止，避免对光标和选择区的状态的干扰。

6.消息输入栏输入两行内容后全选，取消选中光标放置内容末位，点击“Ctrl+Enter”键，已输入的内容被清空；

问题定位：

全选之后，在将光标置入输入框，浏览器原声的getSelection()的range已经清空，此时浏览器自身的 range.collasped==true.这意味着浏览器已经认为光标的起始位置等于结束位置。但，插件自身的封装的range对象却不能及时更新状态，需要点击输入框第二次才能更新到最新状态。

问题解决：

解决方案1：当输入框执行换行操作时候，先将插件的getSelection()对象的range清空。

弊端：此时会导致用户无法通过ctrl+ enter来清空选择区域。

解决方案2：当输入框执行换行操作的时候，如果插件的range状态滞后于浏览器的range的状态的时候，直接跳过后面的步骤，避免删除掉输入框内容。

弊端：全选后第一次换行不起作用，需要第二次换行。
解决方案3：当输入框执行换行操作的时候，如果插件的range状态滞后于浏览器的range的状态的时候，在插件中发送一个自定位的click事件（之所以要自定位的click事件，是因为要与系统标准事件区分开来），然后在插件中监听此自定位的click事件（监听方式：在click事件的event中判断event.pageX == 0,如果是，则是自定义的事件。因为自定位的事件没有点击位置。）。在监听自定义事件的函数中，调用插件函数，在输入框中插入一个换行。

问题定位：

解决方案：
当输入框执行换行操作的时候，如果插件的range状态滞后于浏览器的range的状态的时候，在插件中发送一个自定义的click事件（之所以要自定义的click事件，是因为要与系统标准click事件区分开来），然后在插件中监听此自定义的click事件（监听方式：在click事件的event中判断event.pageX == 0, 如果是，则是自定义的事件。因为自定位的事件没有点击位置。）。在监听自定义事件的回调函数中，调用插件函数，在输入框中插入一个换行。