vue中使用富文本编辑器

前端使用富文本编辑器的插件有很多，今天献上wangeditor的使用教程，教你如何在vue中使用富文本编辑器

先敬上官网：http://www.wangeditor.com/index.html

wangeditor是一个萌新富文本编辑器，基于js和css，重点在于它轻量，如果你需要的功能不是很复杂，那么选它没错了，刚好能满足你！

第一步：先保证你的电脑中安装有node，当然使用cdn也可以，下载到本地也行，我这里用的vue-cli，顺便下载到项目依赖中了

本地下载：

https://github.com/wangfupeng1988/wangEditor/releases

cdn使用：

https://unpkg.com/wangeditor/release/wangEditor.min.js

node下载：

npm i wangeditor -S

第二步：在项目中引入该插件并定义html结构，我这里使用vue脚手架，没有使用脚手架和其他构建工具的同学可以使用script标签对插件进行引用

例如：

<div id="editor"></div>

<script type="text/javascript" src="https://unpkg.com/wangeditor/release/wangEditor.min.js"></script>

<script type="text/javascript">

  var E = window.wangEditor

  var editor = new E('#editor')

  // 或者 var editor = new E( document.getElementById('editor') )

  editor.create()

</script>

vue-cli中使用：先建立模板，然后引入插件，创建即可，可以对菜单进行配置，也可以对编辑器中的内容进行实时监听

<template>

  <div id="wangeditor">

    <div ref="editorElem" style="text-align:left;"></div>

  </div>

</template>

<script>

import E from "wangeditor";

export default {

  name: "Editor",

  data() {

    return {

      editor: null,

      editorContent: ''

    };

  },

  // catchData是一个类似回调函数，来自父组件，当然也可以自己写一个函数，主要是用来获取富文本编辑器中的html内容用来传递给服务端

  props: ['catchData'], // 接收父组件的方法

  mounted() {

    this.editor = new E(this.$refs.editorElem);

    // 编辑器的事件，每次改变会获取其html内容

    this.editor.customConfig.onchange = html => {

      this.editorContent = html;

      this.catchData(this.editorContent); // 把这个html通过catchData的方法传入父组件

    };

    this.editor.customConfig.menus = [

      // 菜单配置

      'head', // 标题

      'bold', // 粗体

      'fontSize', // 字号

      'fontName', // 字体

      'italic', // 斜体

      'underline', // 下划线

      'strikeThrough', // 删除线

      'foreColor', // 文字颜色

      'backColor', // 背景颜色

      'link', // 插入链接

      'list', // 列表

      'justify', // 对齐方式

      'quote', // 引用

      'emoticon', // 表情

      'image', // 插入图片

      'table', // 表格

      'code', // 插入代码

      'undo', // 撤销

      'redo' // 重复

    ];

    this.editor.create(); // 创建富文本实例

</script>

以上内容就可以实现vue中简单使用富文本编辑器的功能了，更多介绍请参考官网