code

<template>
  <!-- record has been declared -->
  <a-button @click="edit(record)">edit</a-button>
  <a-modal data-source="treeSelectData">
    <a-form-item label="content">
      <div id="content"></div>
    </a-form-item>
  </a-modal>
</template>

import Editor from "wangeditor"; // a Rich Text Format Editor

// variables has been declared
const edit = (record: any) => {
  modalVisible.value = true; // show the a-modal
  doc.value = Tool.copy(record);

  treeSelectData.value = Tool.copy(docs.value);
  setDisable(treeSelectData.value, record.id);
  treeSelectData.value.unshift({ id: "0", name: "root" }); // treeSelectData is the datasource of a-modal

  const editor = new Editor("#content");
  editor.create();
};

description

The error is Invalid selector: #content and show no editor on webpage(the modal has been shown). The modal will only appear when I press the edit button. That is to say, there was no element <div id="content"></div> in DOM before.

But if function edit is transformed into an asynchronous function, and adding await before treeSelectData.value.unshift({ id: "0", name: "root" });, no error will be reported and it will be displayed normally out editor.

// ...
const edit = async (record: any) => {
  // ...
  await treeSelectData.value.unshift({ id: "0", name: "root" }); // treeSelectData is the datasource of a-modal

  const editor = new Editor("#content");
  editor.create();
};

Why?

My guess is that the a-modal will only show when the data source is ready. idk.