通过vue3配置wangeditor服务地址

在 Vue3 中配置 WangEditor 的服务地址，可以按照以下步骤进行：

1. 安装 WangEditor 的依赖包。

   npm install wangeditor --save

2. 在 Vue3 的组件中引入 WangEditor 的 JS 和 CSS 文件。

   <template>
     <div ref="editorElem"></div>
   </template>
   
   <script>
   import WangEditor from 'wangeditor';
   import 'wangeditor/dist/css/wangEditor.min.css';
   
   export default {
     mounted() {
       this.initEditor();
     },
     methods: {
       initEditor() {
         const editor = new WangEditor(this.$refs.editorElem);
         editor.config.uploadImgServer = '/your/upload/img/server';
         editor.create();
       }
     }
   }
   </script>

在这个例子中，我们通过 `import` 引入了 WangEditor 的 JS 文件和 CSS 文件。在 `mounted` 生命周期函数中，我们调用 `initEditor` 方法初始化编辑器。在 `initEditor` 方法中，我们创建了一个 WangEditor 的实例，并传入编辑器的容器元素 `this.$refs.editorElem`。然后，我们配置了上传图片的服务地址 `editor.config.uploadImgServer`，并调用 `editor.create` 方法创建编辑器。

3. 在你的图片上传服务中处理上传的图片，并返回图片的 URL。这里的服务地址为 `/your/upload/img/server`。

   router.post('/your/upload/img/server', function(req, res, next) {
     // 处理上传的图片
     // 保存图片到服务器或者对象存储中
     // 返回图片的 URL
     res.send({errno:0, data:['http://example.com/path/to/image']});
   });

同样需要返回 JSON 格式的数据，包含 `errno` 和 `data` 两个字段，其中 `errno` 表示错误码，`0` 表示上传成功，`data` 是一个数组，包含上传的图片的 URL。

通过以上步骤，你就可以在 Vue3 中成功地配置 WangEditor 的服务地址了。