vue中使用wangEditor

一，引入wangEditor

npm install wangeditor --save

二、配置，自己看的文檔配置的（文檔地址：https://www.kancloud.cn/wangfupeng/wangeditor3/332599）

<template>
  <div>
    <div id="editorElem" style="text-align:center;"></div>
    {{editorContent}}
  </div>
</template>
<script>
import E from "wangeditor";
export default {
  data() {
    return {
      editorContent: ""
    };
  },
  methods: {
    getContent: function() {
      alert(this.editorContent);
    }
  },
  mounted() {
    var editor = new E("#editorElem");
    editor.customConfig.onchange = html => {
      this.editorContent = html;
    };
    editor.customConfig.menus = [
      "head", // 標題
      "bold", // 粗體
      "fontSize", // 字號
      "fontName", // 字體
      "italic", // 斜體
      "underline", // 下划線
      "strikeThrough", // 刪除線
      "foreColor", // 文字顏色
      "backColor", // 背景顏色
      "link", // 插入鏈接
      "list", // 列表
      "justify", // 對齊方式
      "quote", // 引用
      "emoticon", // 表情
      "image", // 插入圖片
      "table", // 表格
      "video", // 插入視頻
      "code", // 插入代碼
      "undo", // 撤銷
      "redo" // 重復
    ];
    editor.customConfig.zIndex = 100;
    //過濾掉復制文本中自帶的樣式,默認開啟
    editor.customConfig.pasteFilterStyle = false;
    // 自定義處理粘貼的文本內容
    editor.customConfig.pasteTextHandle = function(content) {
      // content 即粘貼過來的內容（html 或 純文本），可進行自定義處理然后返回
      return (
        "<p style='text-align:center;color:red;border-bottom:1px solid #DCDFE6;border-top:1px solid #DCDFE6;'>以下內容來源於網絡,或者復制過來</p>" +
        content +
        "<p style='text-align:center;color:red;border-bottom:1px solid #DCDFE6;border-top:1px solid #DCDFE6;'>以上內容來源於網絡,或者復制過來</p>"
      );
    };
    editor.customConfig.linkImgCallback = function(url) {
      console.log(url); // url 即插入圖片的地址
    };
    editor.customConfig.linkCheck = function(text, link) {
      console.log(text); // 插入的文字
      console.log(link); // 插入的鏈接

      return true; // 返回 true 表示校驗成功
      // return '驗證失敗' // 返回字符串，即校驗失敗的提示信息
    };
    // 自定義配置顏色（字體顏色、背景色）
    editor.customConfig.colors = [
      "#000000",
      "#eeece0",
      "#1c487f",
      "#4d80bf",
      "#c24f4a",
      "#8baa4a",
      "#7b5ba1",
      "#46acc8",
      "#f9963b",
      "#ffffff"
    ];
    // 表情面板可以有多個 tab ，因此要配置成一個數組。數組每個元素代表一個 tab 的配置
    editor.customConfig.emotions = [
      {
        // tab 的標題
        title: "默認",
        // type -> 'emoji' / 'image'
        type: "image",
        // content -> 數組
        content: [
          {
            alt: "[壞笑]",
            src:
              "http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/50/pcmoren_huaixiao_org.png"
          },
          {
            alt: "[舔屏]",
            src:
              "http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/40/pcmoren_tian_org.png"
          }
        ]
      },
      {
        // tab 的標題
        title: "emoji",
        // type -> 'emoji' / 'image'
        type: "emoji",
        // content -> 數組
        content: ["😀", "😃", "😄", "😁", "😆"]
      }
    ];
    // 自定義字體
    editor.customConfig.fontNames = [
      "宋體",
      "微軟雅黑",
      "Arial",
      "Tahoma",
      "Verdana"
    ];
    // 隱藏“網絡圖片”tab
    editor.customConfig.showLinkImg = false;
    // 下面兩個配置，使用其中一個即可顯示“上傳圖片”的tab。但是兩者不要同時使用！！！
    editor.customConfig.uploadImgShowBase64 = true; // 使用 base64 保存圖片不建議使用這種，我只是圖個方便
    // editor.customConfig.uploadImgServer = '/upload'  // 上傳圖片到服務器
    editor.create();
  }
};
</script>
<style >
/* table 樣式 */
table {
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
}
table td,
table th {
  border-bottom: 1px solid #ccc;
  border-right: 1px solid #ccc;
  padding: 3px 5px;
}
table th {
  border-bottom: 2px solid #ccc;
  text-align: center;
}

/* blockquote 樣式 */
blockquote {
  display: block;
  border-left: 8px solid #d0e5f2;
  padding: 5px 10px;
  margin: 10px 0;
  line-height: 1.4;
  font-size: 100%;
  background-color: #f1f1f1;
}

/* code 樣式 */
code {
  display: inline-block;
  *display: inline;
  *zoom: 1;
  background-color: #f1f1f1;
  border-radius: 3px;
  padding: 3px 5px;
  margin: 0 3px;
}
pre code {
  display: block;
}

/* ul ol 樣式 */
ul,
ol {
  margin: 10px 0 10px 20px;
}
</style>

三、引入，因為我一個頁面引入多次的問題，重復使用一個組件三個匯聚到一起，所以，我建了三個組件頁面

import editor1 from './../components/wangEditor1';
import editor2 from './../components/wangEditor2';
import editor3 from './../components/wangEditor3';
export default {
  components: {
    editor1,
    editor2,
    editor3,
  },

<editor1 v-model="one" ></editor1>
<editor2 v-model="two" ></editor2>
<editor3 v-model="three" ></editor3>