在 Vue 2 项目中集成使用 WangEditor 富文本编辑器

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！