缺少 compositionstart，compositionupdate， compositionend 事件支持，中文输入双向绑定会有问题

[caryhgq]

<script setup>
import { onMounted, onUnmounted, ref, watch } from "vue";
import { AiEditor } from "aieditor";
import "aieditor/dist/style.css";


const model = defineModel({ required: true });

const divRef = ref();
let aiEditor = null;

onMounted(() => {
  aiEditor = new AiEditor({
    element: divRef.value,
    placeholder: "点击输入内容...",
    content: "AiEditor 是一个面向 AI 的开源富文本编辑器。 ",
    onCreated(){
      aiEditor.setContent(model.value); 
    },
    onChange(dd) {
      model.value = dd.getHtml(); // 这里中文输入时，拼音也会输入进去
    },
  });
});

watch(
  () => model.value,
  (val) => {
    aiEditor.setContent(val); // 这里收集了上次输入的拼音，导致输入内容错误
  }
);
onUnmounted(() => {
  aiEditor && aiEditor.destroy();
});
</script>

<template>
  <div>
    <h1>AiEditor，一个面向 AI 的富文本编辑器</h1>
  </div>
  <div ref="divRef" style="height: 600px" />
</template>

[yangfuhai]

这个指的是？

[naiheyoung]

我进行了测试, 问题如下

当输入中文时, 拼音会键入HTML元素内

但其实这个是不影响实际获取的内容的

拼音的每一个字符变化都会触发onChange事件, 有如下解决方案 compositionstart compositionend

<div ref="editor" @compositionstart="isTyping = true" @compositionend="handlerEnd"></div>

<script setup lang="ts">
let editor = templateRef("editor");
let content = $ref<string>("");
let isTyping = $ref(false);
let instance = $ref<AiEditor>();

const handlerEnd = () => {
  isTyping = false;
  setTimeout(() => {
    content = instance!.getHtml();
  }, 0);
};

onMounted(() => {
  instance = new AiEditor({
    element: editor.value,
    onChange(editor) {
      // 在中文输入过程中不进行操作, 输入完毕进行处理
      if (isTyping) return;
      content = editor.getHtml();
    },
  });
});
</script>