código

 <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(); };

descripción

El error es Invalid selector: #content y no muestra ningún editor en la página web (se ha mostrado el modal). El modal solo aparecerá cuando presione el botón editar. Es decir, no había ningún elemento <div id="content"></div> en DOM antes.

Pero si la edición de la función se transforma en una función asíncrona y se agrega await antes treeSelectData.value.unshift({ id: "0", name: "root" }); , no se informará ningún error y se mostrará normalmente fuera del 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(); };

¿Por qué?

Supongo que el a-modal solo se mostrará cuando la fuente de datos esté lista. no sé.