vue2中wangeditor富文本编辑器

集成 WangEditor 到 Vue 2
为了在 Vue 2 中集成 WangEditor 富文本编辑器，需遵循一系列特定的操作流程来确保顺利安装和配置。
安装依赖包
首先，在命令行界面执行如下指令以安装必要的软件包：
npm install wangEditor --save
登录后复制
此操作会将 WangEditor 添加至项目的 node_modules 文件夹内[^2]。
创建 Editor 组件
创建一个新的组件用于封装 WangEditor 实例。下面是一个简单的例子，展示了如何构建这个组件：
<template>
<div ref="editorElem" style="text-align:left"></div>
</template>

<script>
import E from 'wangeditor'

export default {
name: "MyEditor",
data() {
return {
editor: null,
info_: ''
}
},
mounted() {
const editor = new E(this.$refs.editorElem)

// 自定义菜单配置和其他初始化设置
editor.config.menus = [
'head', // 标题
'bold', // 粗体
'fontSize', // 字号
'fontName', // 字体
'italic', // 斜体
'underline', // 下划线
'strikeThrough', // 删除线
'foreColor', // 文字颜色
'backColor', // 背景颜色
'link', // 插入链接
'list', // 列表
'justify', // 对齐方式
'quote', // 引用
'emoticon', // 表情
'image', // 插入图片
'table' // 表格
]

editor.create()

this.editor = editor;
},

beforeDestroy() {
// 销毁前清除实例
if (this.editor != null) {
this.editor.destroy();
this.editor = null;
}
}
}
</script>
登录后复制
上述代码片段中，通过引用 wangEditor 库并利用其 API 来定制化编辑器的功能选项以及外观布局。
将 Editor 组件加入页面
最后一步是在目标视图或父级容器里注册并使用新创建的 MyEditor 组件：
<template>
<div id="app">
<!-- 其他 HTML 结构 -->
<my-editor></my-editor> <!-- 这里放置自定义编辑器组件 -->
</div>
</template>

<script>
// 假设已经按照官方指南设置了单文件组件环境...
import MyEditor from './components/MyEditor.vue';

export default {
components: { MyEditor } // 注册子组件
};
</script>
登录后复制
这样就完成了基本的集成功能，可以根据实际需求进一步调整和完善编辑器的各项特性。