在vue中引入富文本编辑框

### 如何在 Vue.js 中添加和配置富文本编辑器组件

#### 使用 `@wangeditor/editor-for-vue` 实现富文本编辑器

为了在 Vue 3 项目中集成富文本编辑器，可以采用 `@wangeditor/editor-for-vue` 这一库来构建支持图片上传、双向数据绑定等功能的组件[^1]。

安装依赖：

npm install @wangeditor/editor @wangeditor/editor-for-vue

引入并注册组件，在项目的入口文件或相应页面加入如下代码：

import { createApp } from 'vue';
import App from './App.vue';
// 导入样式
import '@wangeditor/editor/dist/css/style.css';

const app = createApp(App);
app.use(/* ... */);

export default {
    name: "MyComponent",
    components: {},
};

定义组件模板部分，设置容器用于承载编辑区域：

<div id="editor-container"></div>
<wang-editor v-model="content" />

编写脚本逻辑处理编辑器初始化及其他交互行为：

<script setup>
import WangEditor from "@wangeditor/editor-for-vue";
import { ref, onBeforeUnmount } from "vue";

let editor;
const content = ref("<p>初始内容</p>");

function handleCreated(editorInstance) {
    editor = editorInstance; // 记录下 editor 实例，后面可以用 editor.api 获取编辑器接口
}

defineExpose({
    setContent(value) {
        editor?.setText(value);
    },
});
</script>

<template>
    <wang-editor :value="content" @on-created="handleCreated"/>
</template>

#### 利用 `Vue-Quill-Editor-Upload` 构建增强型富文本编辑器

另一种方案是借助于 `Vue-Quill-Editor-Upload` 来搭建具备更多特性的富文本编辑环境。此插件不仅提供基本的文字排版能力，还增强了对于媒体资源的支持程度，比如允许直接嵌入图像与视频素材等[^2]。

先执行必要的包管理命令获取所需模块：

npm i vue-quill-editor axios form-data --save

接着按照官方文档说明完成具体操作步骤即可快速上手使用该控件。

#### 应用百度 UEditor 组件化解决方案

针对某些特定场景下的应用需求，也可以考虑选用由国内知名搜索引擎公司提供的开源产品——百度 UEditor 。其特点是兼容性强、稳定性高，并且拥有丰富的API可供调用定制个性化功能[^3]。

安装过程相对简单明了：

npm install baidu-web-uieditor --save

随后参照给出的例子调整HTML结构以及JavaScript语句片段从而顺利启动实例对象。