wangEditor icon indicating copy to clipboard operation
wangEditor copied to clipboard

editor.blur()调用后再次聚焦的问题

Open rickslab opened this issue 2 years ago • 0 comments

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&nbsp;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

rickslab avatar Nov 21 '23 06:11 rickslab