WangEditor 是一款轻量级、开源、简洁的 Web 富文本编辑器，支持 HTML5 和现代浏览器，适合用于简单的内容编辑场景。本文将介绍如何在 Vue 2 项目中集成并使用 WangEditor，帮助你快速构建一个支持富文本编辑的应用。
一、项目初始化
首先，确保你已经安装了 Vue CLI，如果还未安装，可以通过以下命令全局安装：
npm install -g vue-cli
接着，使用 Vue CLI 初始化一个 Vue 2 项目：
vue init webpack my-vue-wangeditor-app
cd my-vue-wangeditor-app
npm install
启动开发服务器：
npm run dev
二、安装 WangEditor
接下来，在项目中安装 WangEditor：
npm install wangeditor --save
三、创建 WangEditor 组件
为了在 Vue 项目中使用 WangEditor，我们可以将其封装为一个 Vue 组件。
1. 创建 WangEditor 组件
在 src/components 文件夹中，创建一个名为 WangEditor.vue 的组件文件。
<template>
<div>
<div ref="editor" style="text-align: left;"></div>
</div>
</template>
<script>
import E from 'wangeditor';
export default {
name: 'WangEditor',
data() {
return {
editor: null, // WangEditor 实例
};
},
props: {
content: {
type: String,
default: ''
}
},
watch: {
// 当父组件传入的 content 变化时，更新编辑器内容
content(newContent) {
if (this.editor && newContent !== this.editor.txt.html()) {
this.editor.txt.html(newContent);
}
}
},
mounted() {
// 初始化 WangEditor
this.editor = new E(this.$refs.editor);
this.editor.config.onchange = () => {
// 编辑器内容变化时，触发 input 事件传递给父组件
this.$emit('input', this.editor.txt.html());
};
// 配置菜单和其他设置
this.editor.config.menus = [
'head', // 标题
'bold', // 粗体
'italic', // 斜体
'underline', // 下划线
'image', // 图片
'link', // 链接
'list', // 列表
'undo', // 撤销
'redo', // 重做
];
this.editor.config.zIndex = 1000;
// 创建编辑器
this.editor.create();
// 设置初始内容
if (this.content) {
this.editor.txt.html(this.content);
}
},
beforeDestroy() {
// 销毁编辑器实例，释放资源
if (this.editor) {
this.editor.destroy();
}
}
};
</script>
<style scoped>
/* 可以根据需要调整编辑器样式 */
</style>
2. 使用组件
在 src/App.vue 中引入并使用我们刚刚创建的 WangEditor 组件。
<template>
<div id="app">
<h1>WangEditor Demo</h1>
<WangEditor v-model="editorContent" />
<div>
<h2>实时预览</h2>
<div v-html="editorContent"></div>
</div>
</div>
</template>
<script>
import WangEditor from './components/WangEditor.vue';
export default {
name: 'App',
components: {
WangEditor
},
data() {
return {
editorContent: '<p>欢迎使用 WangEditor!</p>' // 初始化编辑器内容
};
}
};
</script>
<style>
/* 可根据需要添加全局样式 */
</style>
3. 运行效果
此时运行项目，npm run dev，你应该会看到 WangEditor 富文本编辑器出现在页面中，并且支持实时编辑和预览内容。
四、常见问题
1. 图片上传
WangEditor 支持图片上传功能，但默认是使用 base64 方式。你可以根据需要配置自己的图片上传服务。具体可以通过修改 editor.config.uploadImgServer 配置图片上传接口地址。
this.editor.config.uploadImgServer = '/api/upload'; // 图片上传接口
2. 自定义菜单栏
你可以通过 editor.config.menus 自定义显示哪些菜单栏。例如，移除不需要的菜单，只保留标题、加粗和图片：
this.editor.config.menus = [
'head',
'bold',
'image',
];
3. 禁用编辑功能
如果你需要将编辑器设置为只读模式，可以通过禁用菜单栏功能来实现：
this.editor.$textElem.attr('contenteditable', false); // 禁用编辑
五、总结
通过本文的步骤，你已经了解了如何在 Vue 2 项目中集成使用 WangEditor 富文本编辑器。从安装到使用的流程相对简单，并且 WangEditor 提供了丰富的扩展配置，能够满足大部分富文本编辑需求。你可以根据自己的项目需求，进一步配置上传功能或自定义菜单栏等功能。
希望这篇教程对你有所帮助，祝你在 Vue 项目开发中顺利使用 WangEditor！
