###
Vue3 中集成
Element Plus 的 `
el-dialog` 组件并添加富文本编辑器
以下是基于
Vue3 和
Element Plus 实现的一个完整的示例代码，展示如何在 `
el-dialog` 中集成 Wangeditor 富文本编辑器。
#### 安装依赖
首先需要安装必要的库：
```bash
npm install @wangeditor/editor
-for
-vue element
-plus
vue@next
```
#### 示例代码实现
```
vue
<template>
<div>
<!
-- 打开弹窗按钮
-->
<
el-button type="primary" @click="
dialogFormVisible = true">打开对话框</
el-button>
<!
-- 对话框
-->
<
el-dialog title="富文本编辑器" v
-mod
el="
dialogFormVisible">
<div id="editor
Elem" style="text
-align:left;"></div>
<template #footer>
<span class="
dialog-footer">
<
el-button @click="hide()">取消</
el-button>
<
el-button type="primary" @click="modifyplan()">确认</
el-button>
</span>
</template>
</
el-dialog>
</div>
</template>
<script>
import {
ElDialog,
ElButton } from '
element
-plus';
import '@wangeditor/editor/dist/css/style
.css'; // 引入样式文件
import WangEditor from '@wangeditor/editor
-for
-vue';
export default {
components: {
ElDialog,
ElButton,
WangEditor,
},
data() {
return {
dialogFormVisible: false, // 控制弹窗显示隐藏
editor: null, // 编辑器实例
getPlan: {
plan: '<p>初始内容</p>', // 默认内容
},
};
},
methods: {
modifyplan() {
this
.dialogFormVisible = false;
this
.getPlan
.plan = this
.editor
.txt
.html(); // 将富文本内容保存到数据中
},
show() {
const editor = new WangEditor('#editor
Elem');
this
.editor = editor;
// 配置菜单栏
editor
.config
.menus = [
'
head',
'bold',
'fontSize',
'fontName',
'italic',
'underline',
'strikeThrough',
'foreColor',
'backColor',
'justify',
'undo',
'redo',
];
// 初始化默认内容
editor
.config
.onchange = (newHtml) => {
console
.log('新的内容:', newHtml);
};
editor
.create();
this
.editor
.txt
.html(this
.getPlan
.plan); // 加载已有内容
},
hide() {
if (this
.editor) {
this
.editor
.destroy(); // 销毁编辑器实例
}
this
.dialogFormVisible = false;
},
},
mounted() {
this
.show(); // 页面加载完成后初始化编辑器
},
};
</script>
<style scoped>
/* 自定义样式 */
#editor
Elem {
height: 300px;
}
</style>
```
---
### 功能说明
1
. **弹窗控制**
使用 `v
-mod
el` 双向绑定变量 `
dialogFormVisible` 来控制 `
el-dialog` 的显隐状态[^1]。
2
. **富文本编辑器初始化**
在 `mounted` 生命周期钩子中调用 `show()` 方法完成编辑器的初始化操作。通过配置 `menus` 属性自定义工具栏功能列表[^1]。
3
. **内容存储与恢复**
当用户点击“确认”按钮时，将当前编辑器中的 HTML 内容赋值给 `getPlan
.plan` 数据字段；当关闭弹窗时，销毁编辑器实例以释放资源，并防止内容残留问题[^2]。
4
. **样式适配**
添加了简单的 CSS 样式
设置编辑区域高度为
固定值（如 300 像素），可根据实际需求进一步调整布局效果。
---
### 注意事项
- 如果项目使用的是
Vue3，则需确保所选插件支持 Composition API 或 Options API 模式下的兼容性。
- 在动态创建或移除 DOM 结构的情况下，请务必手动管理好 Wangeditor 的生命周期方法（create/destroy），以免引发潜在错误或者性能损耗[^2]。
---
扫一扫
1897
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
