uni-app editor组件点击toolbar工具栏反复收起再弹出软键盘

在处理 uni-app 的 editor 组件时，如果点击 toolbar 工具栏导致软键盘反复收起再弹出，这通常是由于工具栏的点击事件与软键盘的焦点管理之间存在冲突。以下是一个可能的解决方案，通过监听 editor 组件的 blur 和 focus 事件，以及 toolbar 的点击事件，来控制软键盘的显示状态。

首先，确保你的 uni-app 项目已经引入了 editor 组件，并且已经正确配置了相关属性。

示例代码

1. 页面模板（template）

<template>
  <view>
    <editor
      id="myEditor"
      v-model="content"
      @blur="onEditorBlur"
      @focus="onEditorFocus"
      placeholder="请输入内容"
      show-toolbar
    />
  </view>
</template>

1. 页面脚本（script）

<script>
export default {
  data() {
    return {
      content: '',
      isKeyboardVisible: false, // 用于记录软键盘是否可见
    };
  },
  methods: {
    onEditorBlur() {
      this.isKeyboardVisible = false;
      // 可以在这里添加其他逻辑，比如保存草稿等
    },
    onEditorFocus() {
      this.isKeyboardVisible = true;
      // 可以在这里添加其他逻辑，比如清空错误提示等
    },
    // 假设你有一个方法来处理toolbar的点击事件（实际中需要根据具体需求实现）
    onToolbarClick() {
      // 如果软键盘已经收起，则尝试重新聚焦到editor以弹出软键盘
      if (!this.isKeyboardVisible) {
        this.$nextTick(() => {
          const editor = this.$refs.editorRef.$el.querySelector('textarea');
          editor.focus();
        });
      }
      // 其他toolbar点击逻辑
    },
  },
  mounted() {
    // 假设你有一个方法来绑定toolbar的点击事件（具体实现依赖于你的toolbar结构）
    this.bindToolbarClick();
  },
  beforeDestroy() {
    // 清理事件绑定
    this.unbindToolbarClick();
  },
  // bindToolbarClick 和 unbindToolbarClick 方法需要根据实际的toolbar结构来实现
};
</script>

注意

• onToolbarClick 方法是一个假设的方法，用于处理工具栏的点击事件。在实际应用中，你需要根据 toolbar 的具体结构和事件绑定方式来实现这个方法。
• this.$refs.editorRef.$el.querySelector('textarea') 用于获取 editor 组件内部的 textarea 元素，并尝试重新聚焦它。这种方法可能需要根据 uni-app 的版本和具体实现进行调整。
• 这种方法可能不是最优解，因为它依赖于内部DOM结构，未来可能会因为 uni-app 或 editor 组件的更新而失效。因此，建议持续关注 uni-app 的更新，并寻找更优雅的解决方案。