實現以下效果：
1、安裝：
輸入命令：npm i wangeditor -S 或 npm install wangeditor
2、使用：
只在需要使用的頁面引入就可以，無需全局。
<template>
<div>
<div id="editor" class="editor"></div>
</div>
</template>
<script> import Editor from 'wangeditor' export default { name: 'editor', data () { return { editor: '' } }, methods: { initEditor () { this.editor = new Editor('#editor') /* 括號里面的對應的是html里div的id */ /* 配置菜單欄 */ this.editor.customConfig.menu = [ 'head', // 標題 'bold', // 粗體 'fontSize', // 字號 'fontName', // 字體 'italic', // 斜體 'underline', // 下划線 'strikeThrough', // 刪除線 'foreColor', // 文字顏色 'backColor', // 背景顏色 'link', // 插入鏈接 'list', // 列表 'justify', // 對齊方式 'quote', // 引用 'emoticon', // 表情 'image', // 插入圖片 'table', // 表格 'code', // 插入代碼 'undo', // 撤銷 'redo' // 重復 ] this.editor.customConfig.uploadImgMaxLength = 5 // 限制一次最多上傳 5 張圖片 */ this.editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024 /* 將圖片大小限制為 3M 默認為5M / /* 自定義圖片上傳（支持跨域和非跨域上傳，簡單操作）*/ this.editor.customConfig.customUploadImg = async (files, insert) => { console.log(files, insert) /* files 是 input 中選中的文件列表 */ let formData = new FormData() formData.append('file', files[0]) /* 調用后台提供的上傳圖片的接口 */ let data = 接口返回數據 /* insert 是編輯器自帶的 獲取圖片 url 后，插入到編輯器的方法 上傳代碼返回結果之后，將圖片插入到編輯器中*/ insert(data.imgUrl) } this.editor.customConfig.onchange = (html) => { console.log(html) /* html 即變化之后的內容 */ } this.editor.create() /* 創建編輯器 */ this.editor.txt.html('<H1>用 JS 設置的內容</H1>') /* 默認顯示內容-回顯 */ } }, mounted () { this.initEditor() } } </script>