html定義一個裝編輯器的DIVhtml
<template>
<div id="editor"></div>
</template>
複製代碼
npm安裝wangEditorvue
npm install wangeditor --save /*wangeditor須要小寫*/
複製代碼
vue頁面導入wangEditornpm
import Editor from 'wangeditor'
export default {
data () {
return {
editor: ''
}
}
}
複製代碼
vue頁面實例化wangEditor跨域
methods: {
async 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) => {
/* files 是 input 中選中的文件列表 */
let formData = new FormData()
formData.append('file', files[0])
let data = await this.upload(formData)
/* upload方法是後臺提供的上傳圖片的接口 */
/* insert 是編輯器自帶的 獲取圖片 url 後,插入到編輯器的方法 上傳代碼返回結果以後,將圖片插入到編輯器中*/
insert(data.imgUrl)
}
this.editor.customConfig.onchange = (html) => {
/* html 即變化以後的內容 */
}
this.editor.create() /* 建立編輯器 */
}
}
複製代碼
渲染富文本編輯器bash
mounted () {
this.initEditor()
}
複製代碼