Vue3项目推荐使用@vueup/vue-quill集成quill编辑器，需安装最新版、引入CSS、用QuillEditor组件并配置toolbar，禁用base64图片以避免内容超长。
要快速选对富文本编辑器并完成集成，得先看清项目实际需求：是需要支持数学公式、多图上传、离线可用，还是强调轻量易配、Vue/React开箱即用、或必须兼容IE11？不同编辑器在这些关键点上差异极大，选错会导致后续反复重写。
主流富文本编辑器功能与适用场景速查
Editor.md：左写右预览，【仅适合Markdown写作场景】，不支持所见即所得的HTML拖拽排版；默认启用代码高亮和表格插入，但图片上传需自行配置跨域接口。
quill：API极干净，主题切换只需改CSS变量；【Vue3中必须用@vueup/vue-quill替代已废弃的vue-quill-editor】，否则控制台会报“Quill is not defined”错误。
TinyMCE：插件生态最全，自带首行缩进、字数统计、多图上传模块；但免费版顶部有版权水印，商用需购买许可证；【v6.3+版本不再支持IE11】，若项目仍需兼容IE，必须锁定v5.10.5。
wangEditor：中文文档最友好，4行代码就能初始化；不依赖jQuery，原生JS、Vue2/3、React18均可直接用；但默认不支持表格合并单元格、不带公式编辑器。
CKEditor 5：模块化程度最高，可按需引入Heading、Bold、ImageUpload等独立包；【其ClassicEditor构建后体积超300KB】，移动端加载慢，建议用BalloonEditor或InlineEditor减负。
Vue3项目中集成quill（推荐方案）
第一步：安装最新兼容包
npm install @vueup/vue-quill@latest
第二步：在组件中引入并注册
import { QuillEditor } from '@vueup/vue-quill'; import '@vueup/vue-quill/dist/vue-quill.css';
第三步：模板内使用，绑定v-model并禁用base64图片
<QuillEditor v-model="content" :toolbar="toolbarOptions" />
第四步：配置toolbar，移除图片按钮，换为自定义上传入口
const toolbarOptions = [['bold', 'italic'], [{ 'list': 'ordered'}, { 'list': 'bullet' }]];
注意：不要直接用img标签插入本地路径，quill会自动转成base64——这会导致内容字段超长，MySQL TEXT类型可能截断；必须监听imageAdded事件，调用你自己的上传函数，再用editor.formatText插入返回的URL。
从零部署TinyMCE到静态页面
方法一：CDN直连（适合原型验证）
在<head>中加入：
<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/7/tinymce.min.js" referrerpolicy="origin"></script>
方法二：离线部署（生产环境必需）
下载tinymce_7.6.0.zip → 解压后把tinymce文件夹整个扔进项目/static目录 → 在HTML中引用/static/tinymce/tinymce.min.js
方法三：初始化时指定语言与插件
tinymce.init({ selector: '#myeditor', language: 'zh_CN', plugins: 'lists link image table code', toolbar: 'undo redo | bold italic | bullist numlist | link image | code' });
这一步操作起来很简单，直接把文件拖进去就行。但【务必删掉init里没用的plugins】，比如启用了powerpaste却没配后端服务，用户粘贴Word内容时会卡死。
UEditor（百度）在Vue3中的降级适配
由于UEditor官方已停止维护，Vue3项目只能用社区维护版vue-ueditor-wrap@3.x。
安装命令：
npm install vue-ueditor-wrap@3.0.0-beta.12
main.ts中全局注册：
import { createApp } from 'vue'; import VueUeditorWrap from 'vue-ueditor-wrap'; createApp(App).use(VueUeditorWrap).mount('#app');
组件内使用：
<vue-ueditor-wrap v-model="htmlContent" :config="ueditorConfig" />
关键配置项必须显式声明serverUrl，否则图片上传按钮点击无反应：
ueditorConfig: { serverUrl: '/api/ueditor/upload', UEDITOR_HOME_URL: '/static/UEditor/' }
注意：/static/UEditor/目录下必须包含dialogs、lang、themes等完整子目录，缺任何一个都会导致工具栏图标不显示。
