vue3+vite3+typescript使用wangEditor编辑器

可以使用以下步骤在 Vue3 + Vite3 + Typescript 中使用 WangEditor 编辑器：

1. 安装 WangEditor。可以使用 npm 或 yarn 安装。

   npm install wangeditor --save
   # 或者
   yarn add wangeditor

2. 在 `main.ts` 中引入 WangEditor 和 CSS 文件。

   import WangEditor from 'wangeditor';
   import 'wangeditor/release/wangEditor.css';

   const app = createApp(App);
   app.config.globalProperties.$WangEditor = WangEditor; // 挂载编辑器到全局
   app.mount('#app');

3. 在组件中使用 WangEditor。

   <template>
     <div class="editor-wrapper">
       <div ref="editorRef"></div>
     </div>
   </template>

   <script lang="ts">
   import { defineComponent, onMounted, ref } from 'vue';

   export default defineComponent({
     name: 'Editor',
     setup() {
       const editorRef = ref<HTMLDivElement>();

       onMounted(() => {
         const editor = new (window as any).$WangEditor(editorRef.value);
         editor.create();
       });

       return {
         editorRef,
       };
     },
   });
   </script>

   <style lang="scss">
   .editor-wrapper {
     height: 400px;
     .w-e-text-container {
       height: 100%;
     }
   }
   </style>

在 `onMounted` 钩子函数中，使用 `new (window as any).$WangEditor` 来创建编辑器实例，并传入编辑器容器的 DOM 节点。调用 `editor.create()` 方法来创建编辑器。

注意：由于 WangEditor 的类型定义文件并不完善，因此可以在 `tsconfig.json` 中添加以下配置来避免类型检查报错。

   {
     "compilerOptions": {
       "skipLibCheck": true
     }
   }

这样，就可以在 Vue3 + Vite3 + Typescript 中使用 WangEditor 编辑器了。