上一篇我們已經創建了wangEdit.vue子組件，在里面編譯如下：
dom結構中需要引入工具欄和編輯器兩部分，如圖所示：
代碼部分：
<script>
import store from '@/store'
import {Editor, Toolbar} from '@wangeditor/editor-for-vue'
import { DomEditor } from '@wangeditor/editor'
export default {
name: 'wangEditor',
components: {Editor, Toolbar},
props: [
'editorParams'
],
data() {
return {
// 富文本編輯器對象
editor: null,
// 富文本內容
content: null,
// 富文本占位內容
placeholder: null,
// 富文本上傳圖片的地址
uploadImageUrl: null,
// 富文本最小高度
height: '300px',
// 富文本是否禁用
isDisabled: false,
// 工具欄配置
toolbarConfig: {
// 顯示指定的菜單項
// toolbarKeys: [],
// 隱藏指定的菜單項
excludeKeys: [
// 隱藏全屏按鈕
"fullScreen"
],
},
// 編輯器配置
editorConfig: {
placeholder: '請輸入內容......',
MENU_CONF: ['uploadImage']
}
}
},
watch: {
/**
* 深度監聽富文本參數
*/
'editorParams': {
handler: function (newVal, oldVal) {
if (newVal != null) {
this.content = newVal.content
this.editorConfig.placeholder = this.placeholder
this.uploadImageUrl = newVal.uploadImageUrl
this.setUploadImageConfig()
this.height = newVal.height
this.isDisabled = newVal.isDisabled
}
},
immediate: true,
deep: true
}
},
methods: {
/**
* 實例化富文本編輯器
*/
onCreated(editor) {
this.editor = Object.seal(editor)
this.setIsDisabled()
},
/**
* 監聽富文本編輯器
*/
onChange(editor) {
// console.log('onChange =>', editor.getHtml())
},
/**
* this.editor.getConfig().spellcheck = false
* 由于在配置中關閉拼寫檢查，值雖然設置成功，但是依然顯示紅色波浪線
* 因此在富文本編輯器組件掛載完成后，操作 Dom 元素設置拼寫檢查 spellcheck 為假
*/
async setSpellCheckFasle() {
let doms = await document.getElementsByClassName('w-e-scroll')
for (let vo of doms) {
if (vo) {
if (vo.children.length > 0) {
vo.children[0].setAttribute('spellcheck', 'false')
}
}
}
},
/**
* 設置富文本是否禁用
*/
async setIsDisabled() {
if (this.editor) {
this.isDisabled ? (this.editor.disable()) : (this.editor.enable())
}
},
/**
* 上傳圖片配置
*/
setUploadImageConfig() {
this.editorConfig.placeholder = this.placeholder
this.editorConfig.MENU_CONF['uploadImage'] = {
fieldName: 'file', // 文件字段名（后端需要對應的字段）， 默認值 'wangeditor-uploaded-image'
maxFileSize: 6 * 1024 * 1024, // 單個文件的最大體積限制，默認為 2M，此次設置為 6M
maxNumberOfFiles: 30, // 最多可上傳幾個文件，默認為 100
allowedFileTypes: ['image/*'], // 選擇文件時的類型限制，默認為 ['image/*'] ，若不想限制，則設置為 []
meta: {// 自定義上傳參數，例如傳遞驗證的 token 等，參數會被添加到 formData 中，一起上傳到服務端
'TENANT-ID': store.getters.userInfo.tenantId,
Authorization: 'Bearer ' + store.getters.access_token
},
metaWithUrl: false, // 將 meta 拼接到 URL 參數中，默認 false
headers: {// 設置 HTTP 請求頭信息
'TENANT-ID': store.getters.userInfo.tenantId,
Authorization: 'Bearer ' + store.getters.access_token
},
server: this.uploadImageUrl, // 上傳圖片接口地址
withCredentials: false, // 跨域是否傳遞 cookie ，默認為 false
timeout: 5 * 1000, // 超時時間，默認為 10 秒，此次設置為 5 秒
// 自定義插入圖片
customInsert(res, insertFn) {
// 因為自定義插入導致onSuccess與onFailed回調函數不起作用,自己手動處理
// 注意此處將返回的文件路徑拼接出來放入,注意應該是完整地址，res為上傳后接口返回的數據
let file_url = '';
insertFn(file_url, res.data.fileName, file_url);
},
// 上傳之前觸發
onBeforeUpload(file) {
return file
},
// 上傳進度的回調函數
onProgress(progress) {
console.log('progress', progress)
},
// 單個文件上傳成功之后
onSuccess(file, res) {
console.log(`${file.name} 上傳成功`, res)
},
// 單個文件上傳失敗
onFailed(file, res) {
console.log(`${file.name} 上傳失敗`, res)
},
// 上傳錯誤，或者觸發 timeout 超時
onError(file, err, res) {
console.log(`${file.name} 上傳出錯`, err, res)
}
}
},
/**
* 獲取編輯器文本內容
*/
getEditorText() {
const editor = this.editor
if (editor != null) {
return editor.getText()
}
},
/**
* 獲取編輯器Html內容
*/
getEditorHtml() {
const editor = this.editor
// 下方三行用來獲取編輯器工具欄分組
// const toolbar = DomEditor.getToolbar(this.editor)
// const curToolbarConfig = toolbar.getConfig()
// console.log( curToolbarConfig.toolbarKeys )
if (editor != null) {
return editor.getHtml()
}
},
/**
* 填充編輯器Html內容
*/
setEditorHtml(html) {
const editor = this.editor
if (editor != null) {
editor.setHtml(html)
}
}
},
created() {
},
mounted() {
this.setSpellCheckFasle() // 設置拼寫檢查 spellcheck 為假
document.activeElement.blur() // 取消富文本自動聚焦且禁止虛擬鍵盤彈出
},
/**
* 銷毀富文本編輯器
*/
beforeDestroy() {
const editor = this.editor
if (editor != null) {
editor.destroy()
}
}
}
script>
<style src="@wangeditor/editor/dist/css/style.css">style>
<style lang="less" scoped>
.w-e-full-screen-container {
z-index: 99;
}
.w-e-for-vue {
margin: 0;
border: 1px solid #ccc;
.w-e-for-vue-toolbar {
border-bottom: 1px solid #ccc;
}
.w-e-for-vue-editor {
height: auto;
/deep/ .w-e-text-container {
.w-e-text-placeholder {
top: 6px;
color: #666;
}
pre {
code {
text-shadow: unset;
}
}
p {
margin: 5px 0;
font-size: 14px; // 設置編輯器的默認字體大小為14px
}
}
}
}
style>
有關子組件傳值的內容可以點擊此鏈接>>查看。
到這里，擁有完整功能的富文本編輯器就完成了。
