前端使用富文本編輯器的插件有很多由缆，今天獻上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中使用：先建立模板，然后引入插件构蹬，創(chuàng)建即可王暗，可以對菜單進行配置，也可以對編輯器中的內容進行實時監(jiān)聽

<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是一個類似回調函數(shù)庄敛，來自父組件俗壹，當然也可以自己寫一個函數(shù)，主要是用來獲取富文本編輯器中的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(); // 創(chuàng)建富文本實例
</script>

以上內容就可以實現(xiàn)vue中簡單使用富文本編輯器的功能了绷雏，更多介紹請參考官網