wangEditor
wangEditor copied to clipboard
editor.blur()调用后再次聚焦的问题
bug 描述
editor.blur()调用后,再点击editor上次光标的位置,没有触发onFocus事件,等到内容变化或光标变化的时候才回调onFocus
你预期的样子是?
正确回调onFocus
系统和浏览器及版本号
- 操作系统 macOS Catalina 10.15.6
- 浏览器和版本 Chrome 119.0.6045.159 x86_64
wangEditor 版本
"@wangeditor/editor": "^5.1.23", "@wangeditor/editor-for-vue": "^1.0.2",
demo 能否复现该 bug ?
能
<template>
<div>
<div>
...
<button @click="blurEditor">blur</button>
</div>
<div style="border: 1px solid #ccc; margin-top: 10px;">
<!-- 工具栏 -->
<Toolbar ...
/>
<!-- 编辑器 -->
<Editor
style="height: 400px; overflow-y: hidden;"
:defaultConfig="editorConfig"
v-model="html"
@onChange="onChange"
@onCreated="onCreated"
@onFocus="onFocus"
@onBlur="onBlur"
/>
</div>
...
</div>
</template>
<script>
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
export default {
name: 'MyEditor',
components: { Editor, Toolbar },
data() {
return {
editor: null,
html: '<p>hello world</p>',
toolbarConfig: {
...
},
editorConfig: {
...
}
}
},
methods: {
...
onFocus(e) {
console.log('onFocus', e);
},
onBlur(e) {
console.log('onBlur', e);
},
...
blurEditor() {
this.editor.blur();
}
},
mounted() {
...
},
beforeDestroy() {
...
},
}
</script>
在线 demo
请尽量提供在线 demo (推荐以下网站),帮助我们最低成本复现 bug
- https://codesandbox.io/
- https://codepen.io/
- https://stackblitz.com/
最小成本的复现步骤
(请告诉我们,如何最快的复现该 bug)
- 步骤一 点击内容末尾处,触发事件onFocus
- 步骤二 点击按钮blur,触发事件onBlur
- 步骤三 再次点击内容末尾相同光标位置,没有触发onFocus