vue3富文本编辑器配置

### Vue3 中配置富文本编辑器 #### 一、安装依赖库 为了在 Vue3 项目中集成富文本编辑器，通常会使用 `tinymce` 或者 `wangEditor` 这样的第三方组件。对于 wangEditor 的情况，可以通过 npm 安装最新版本： ```bash npm install wangeditor --save ``` 而对于 tinymce，则需执行如下命令来获取其资源以及 vue 版本适配包[^2]: ```bash npm i @tinymce/tinymce-vue tinymce -S ``` #### 二、创建富文本编辑器组件 接下来，在 src/components 文件夹下新建 RichTextEditor.vue 组件用于封装所选的富文本编辑器。 如果采用 WangEditor 实现，那么可以在 `<script setup>` 标签内初始化 editor 并设置相关属性[^1]: ```javascript import E from 'wangeditor' import { onMounted, ref } from 'vue' export default { name: "RichTextEditor", props: ['modelValue'], emits: ['update:modelValue'], setup(props, context){ const editor = new E('#editor') let value = ref('') // 将输入框的内容同步给父级组件 function changeHtml(value) { context.emit('update:modelValue', value); } onMounted(() => { editor.config.onchange = (newHtml) => { changeHtml(newHtml) } // 支持粘贴 Word 文档中的内容并处理其中的图片 editor.config.pasteFilterStyle = false; editor.config.uploadImgServer = '/your/upload/api';// 图片上传接口地址 editor.create(); value.value = props.modelValue || ''; }) return{ value, editor }; }, } ``` 当选择 Tinymce 方案时，按照官方文档指引引入 TinyMCE 编辑器实例，并通过 options 参数自定义功能特性： ```html <template> <editor v-model="content" :init="editorInitOptions"/> </template> <script lang="ts"> import Editor from '@tinymce/tinymce-vue'; import axios from 'axios'; const API_URL = process.env.VUE_APP_API_BASEURL; export default defineComponent({ components: { Editor }, data() { return { content: '', editorInitOptions:{ height: 500, menubar: true, plugins: [ 'advlist autolink lists link image charmap print preview anchor', 'searchreplace visualblocks code fullscreen', 'insertdatetime media table paste code help wordcount' ], toolbar: 'undo redo | formatselect | bold italic backcolor | \ alignleft aligncenter alignright alignjustify | \ bullist numlist outdent indent | removeformat | help', images_upload_handler(blobInfo, success, failure) { var xhr, formData; xhr = new XMLHttpRequest(); xhr.withCredentials = false; xhr.open('POST', `${API_URL}/upload`); xhr.onload = () => { let json; if (xhr.status != 200) { failure('HTTP Error: ' + xhr.status); return; } json = JSON.parse(xhr.responseText); if (!json || typeof json.location != 'string') { failure('Invalid JSON: ' + xhr.responseText); return; } success(json.location); }; formData = new FormData(); formData.append('file', blobInfo.blob(), blobInfo.filename()); xhr.send(formData); } } } }); </script> ``` #### 三、注册全局组件以便于在整个应用范围内调用 最后一步是在 main.js/main.ts 中声明上述创建好的富文本编辑器作为全局可用组件: ```typescript import App from './App.vue' import RichTextEditor from '@/components/RichTextEditor.vue' app.component('richTextEditor', RichTextEditor) createApp(App).mount('#app') ``` 现在就可以在任何页面里轻松地利用 `<richTextEditor />` 来实现强大的富文本编辑能力了！