安装富文本插件wangeditor/editor-for-vue
时间: 2025-03-01 17:38:36 浏览: 42
### 如何在 Vue 项目中安装和配置 wangeditor 富文本编辑器
#### 安装依赖库
为了能够在 Vue 项目中使用 wangEditor,首先需要通过 npm 或 yarn 来安装所需的包。
```bash
npm install @wangeditor/editor@latest @wangeditor/editor-for-vue@latest
```
或者如果更倾向于使用 yarn:
```bash
yarn add @wangeditor/editor @wangeditor/editor-for-vue
```
这一步骤确保了开发环境中有最新版本的 editor 和其对应的 vue 组件[^1]。
#### 配置 Vue 组件
创建一个新的 Vue 单文件组件 (SFC),用于承载富文本编辑器。在这个 SFC 中导入必要的模块,并设置好初始状态与方法以便于后续操作。
```javascript
import { onBeforeUnmount, shallowRef } from 'vue'
import { createEditor, BaseEditorProps } from '@wangeditor/editor-for-vue'
export default {
setup() {
const editor = shallowRef()
// 初始化 Editor 实例
const initEditor = async () => {
await createEditor({
selector: '#editor', // DOM 节点的选择器
config: {},
mode: 'default',
placeholder: '请输入内容...',
onChange(editorValue) {
console.log('onChange:', editorValue)
}
}).then((instance) => {
editor.value = instance;
})
}
// 销毁 Editor 实例以防内存泄露
const destroyEditor = () => {
if (!editor.value) return;
editor.value.destroy();
editor.value = null;
};
initEditor();
onBeforeUnmount(() => {
destroyEditor()
})
return {}
},
}
```
此代码片段展示了如何初始化 `createEditor` 函数来构建一个简单的编辑器实例,并设置了页面卸载前清理资源的方法以避免潜在的记忆泄漏问题[^2]。
#### HTML 结构定义
接着,在模板部分添加相应的 div 元素作为编辑区域容器。
```html
<template>
<div id="editor"></div>
</template>
<style scoped>
/* 自定义样式 */
#wangeditor-container *{
box-sizing: border-box;
}
.w-e-text-container {
height: 300px !important; /* 设置高度 */
}
</style>
```
上述 CSS 可选地调整了默认外观,比如指定了固定的高度给 `.w-e-text-container` 类名下的元素[^3]。
阅读全文
相关推荐


















