文檔 https://doc.wangeditor.com/
![](https://img.laitimes.com/img/__Qf2AjLwojIjJCLyojI0JCLicmbw5SO4QmMwIzM2QDZ4YjNwQTYwQzN0kDOyQzMhVWZldjNz8CX5d2bs92Yl1iclB3bsVmdlR2LcNWaw9CXt92Yu4GZjlGbh5yYjV3Lc9CX6MHc0RHaiojIsJye.png)
元件封裝
依賴
# 本次示例使用版本 wangeditor=4.6.6
npm i wangeditor --save
元件目錄
.
├── Editor.vue
├── index.scss # 自定義樣式檔案
└── upload-image.js # 自定義圖檔上傳
主檔案 Editor.
vue<template>
<div ref="editor"></div>
</template>
<script>
import E from 'wangeditor';
import uploadImage from './upload-image.js';
/**
* wangEditor 編輯器
* 文檔 https://doc.wangeditor.com/
*/
export default {
name: 'Editor',
props: {
// v-model
value: { type: String, required: true },
// placeholder
placeholder: { type: String, default: '' },
// height
height: { type: Number|String, default: 100 },
},
model: {
prop: 'value',
event: 'change',
},
data() {
return {
editor: null,
};
},
watch: {
// 不能用箭頭函數
value(val) {
// 如果值不相等再進行指派,避免多次指派造成閃爍
if (this.editor && val !== this.editor.txt.html()) {
this.editor.txt.html(val);
}
},
},
methods: {
initEditor() {
const editor = new E(this.$refs.editor);
editor.config.placeholder = this.placeholder;
editor.config.height = this.height;
// 限制類型
// editor.config.uploadImgAccept = ['jpg', 'jpeg', 'png', 'gif', 'bmp']
editor.config.uploadImgMaxLength = 1; // 一次最多上傳 1 個圖檔
// 配置菜單欄,删減菜單,調整順序
editor.config.menus = [
'undo', // 撤銷
'redo', // 重複
'head', // 标題
'bold', // 粗體
'fontSize', // 字号
'fontName', // 字型
'italic', // 斜體
'underline', // 下劃線
'strikeThrough', // 删除線
'indent', // 縮進
'lineHeight', // 行高
'foreColor', // 文字顔色
'backColor', // 背景顔色
'link', // 插傳入連結接
'list', // 清單
'todo', // 待辦
'justify', // 對齊方式
'quote', // 引用
'emoticon',
'image', // 插入圖檔
'video', // 視訊
'table', // 表格
'code', // 插入代碼
'splitLine', // 分割線
];
// 監聽資料變化
editor.config.onchange = this.handleContentChange;
// 自己實作上傳圖檔
editor.config.customUploadImg = this.handleUploadImage;
// 建立編輯器
editor.create();
// 賦予初始值
editor.txt.html(this.value);
this.editor = editor;
},
handleContentChange(newHtml) {
this.$emit('change', newHtml);
},
/**
* resultFiles 是 input 中選中的檔案清單
* insertImgFn 是擷取圖檔 url 後,插入到編輯器的方法
*/
async handleUploadImage(resultFiles, insertImgFn) {
const imgUrl = await uploadImage(resultFiles[0]);
// 上傳圖檔,傳回結果,将圖檔插入到編輯器中
insertImgFn(imgUrl);
},
},
mounted() {
// 初始化
this.initEditor();
},
beforeDestroy() {
// 調用銷毀 API 對目前編輯器執行個體進行銷毀
this.editor.destroy();
this.editor = null;
},
};
</script>
<style lang="scss">
@import './index.scss';
</style>
自定義樣式 index.scss
// 工具欄icon
.w-e-toolbar .w-e-menu {
width: 30px;
height: 30px;
font-size: 12px;
}
// 工具欄提示文字
.w-e-menu-tooltip {
font-size: 12px;
}
// 工具欄邊框
.w-e-toolbar {
border: 1px solid #dcdfe6 !important;
border-bottom: none !important;
}
// 編輯區域邊框
.w-e-text-container {
border: 1px solid #dcdfe6 !important;
}
// 預設提示文字
.w-e-text-container .placeholder {
font-size: 12px;
color: #c1c5cd;
}
// 上傳按鈕
.w-e-menu .w-e-panel-container .w-e-up-img-container .w-e-up-btn {
width: 100%;
height: 64px;
line-height: 64px;
font-size: 24px;
}
自定義檔案上傳 upload-image.js
import axios from "axios";
/**
* 上傳圖檔接口
* @param {*} file
*/
async function uploadImage(file) {
const from = new FormData();
from.append("image", file);
from.append("token", 'token');
const res = await axios.request({
url: 'uploadImageUrl',
method: "POST",
data: from,
});
// console.log(res);
const imgUrl = res.data;
return imgUrl;
}
export default uploadImage;
元件使用
<Editor
v-model="content"
placeholder="内容(必填)"
height="155"
@change="handleContentChange"
/>