前端编辑组件wangEditor

wangEditor pnpm

方式 1：指定版本安装（很多时候 latest 源拉取失败）

pnpm add @wangeditor/editor@5.1.23 @wangeditor/editor-for-vue3@5.1.23

5.1.23 是稳定常用版本，不要直接装 latest，部分网络环境会超时。

方式 2：切换 npm 源（大概率是国内网络源问题）

临时使用淘宝源安装

pnpm add @wangeditor/editor@5.1.23 @wangeditor/editor-for-vue3@5.1.23 --registry=https://registry.npmmirror.com

永久切换 pnpm 镜像

pnpm config set registry https://registry.npmmirror.com

然后正常安装：

pnpm add @wangeditor/editor@5.1.23 @wangeditor/editor-for-vue@next

方式 3：如果还是下载失败 → 使用 cnpm 兜底

npm install -g cnpm --registry=https://registry.npmmirror.com
cnpm install @wangeditor/editor@5.1.23 @wangeditor/editor-for-vue3@5.1.23

方式 4：备选方案，换 TinyMCE 富文本

wangEditor 网络不好就换 TinyMCE，Vue3 支持良好

pnpm add @tinymce/tinymce-vue tinymce

给你一份可以直接复制的 wangEditor 最小组件模板（安装成功直接用）

import { Editor, Toolbar } from '@wangeditor/editor-for-vue'

完整可用组件模板：

<template>
  <div style="border:1px solid #ccc;">
    <Toolbar :editor="editorRef" mode="default"/>
    <Editor v-model="valueHtml" @onCreated="handleCreated" mode="default"/>
  </div>
</template>

<script setup>
import {ref,onBeforeUnmount} from 'vue'
import {Editor,Toolbar} from '@wangeditor/editor-for-vue'
import '@wangeditor/editor/dist/css/style.css'

const editorRef = ref(null)
const valueHtml = ref('<p>请输入新闻内容</p>')

const handleCreated = (editor)=>{
  editorRef.value = editor
}

onBeforeUnmount(()=>{
  const editor = editorRef.value
  if(editor) editor.destroy()
})
</script>

---

排查小提示

1. 安装失败看报错：connect timeout 就是源网络问题，切换镜像即可。
2. 安装完成后看 package.json 是否出现这两个包版本。
3. Vite 项目不需要全局注册，组件内引入即可。

完整的新建邮件界面：收件人、主题输入框，下面才是富文本编辑器正文区域，模拟写邮件完整表单。