wangEditor是基于javascript和css開發(fā)的 Web富文本編輯器， 輕量、簡潔、易用、開源免費(fèi)。在我們實(shí)際項(xiàng)目上還是比較頻繁應(yīng)用到的，下面出個(gè)案例供大家參考學(xué)習(xí)…

wangEditor文檔：https://www.wangeditor.com/

富文本編輯器截圖：

<!--富文本編輯器。http://www.wangeditor.com/使用示例：<AppEditor v-model='content'></AppEditor>--><template> <article ref='editor' class='AppEditor-root'></article></template><script> const E = require(’wangeditor’); export default { name: ’AppEditor’, model: { prop: ’value’, event: ’update:value’, }, props: { // value值，v-model綁定 value: {type: String, default: ’’}, // 菜單選項(xiàng) menus: { type: Array, default(){ return [ ’bold’, // 粗體 ’italic’,//斜體 ’underline’,//下劃線 ’fontSize’, // 字號(hào) ’strikeThrough’,//刪除線 ’image’, // 插入圖片 ’undo’, // 撤銷 // ’fontName’, // 字體 // ’italic’, // 斜體 // ’underline’, // 下劃線 // ’strikeThrough’, // 刪除線 // ’foreColor’, // 文字顏色 // ’backColor’, // 背景顏色 // ’link’, // 插入鏈接 // ’list’, // 列表 // ’justify’, // 對(duì)齊方式 // ’quote’, // 引用 // ’emoticon’, // 表情 // ’image’, // 插入圖片 // ’table’, // 表格 // ’video’, // 插入視頻 // ’code’, // 插入代碼 // ’undo’, // 撤銷 // ’redo’, // 重復(fù) ]; }, }, }, data(){ return { editor: {}, // 編輯器對(duì)象 _value: ’’, // 內(nèi)容備份，用于watch時(shí)候判斷，只在編輯器輸入時(shí)改變 }; }, computed: {}, mounted(){ this.initEditor(); }, watch: { value(newValue, oldValue){ // 編輯器onchange更改的不處理，只處理父組件傳來的，防止文字回退bug if (newValue != this._value) { this.editor.txt.html(newValue); } }, }, methods: { initEditor(){ let editor = new E(this.$refs.editor); Object.assign(editor.customConfig, { menus: this.menus, zIndex: 100, height: 200, pasteFilterStyle: false, onchange: (html) => { this._value = html; // 更新 _value this.$emit(’update:value’, html); // 更新 value }, customUploadImg:((file, insert)=> { if(this.$utils.isEmpty(file)){ return; } const msg = this.$Message.loading({ content: ’親，圖片正在拼命地上傳中，請(qǐng)稍等...’, duration: 0 }); var params = new FormData(); params.append(’img’, file[0]); this.$api.post(’/synthesis/crm/picture/pictureUpload’,params).then(res => { insert(res.data.imgUrl) setTimeout(msg, 0); this.$Message.success(’上傳成功’); }) }), uploadImgHooks:{ customInsert: function (insertImg, result, editor) { insertImg(result.url) } } }); editor.create(); editor.txt.html(this.value); // 針對(duì)數(shù)據(jù)異步獲取的這里無法立即綁定，在watch判斷處理 this.editor = editor; }, }, };</script><style scoped lang='scss'> .AppEditor-root{ border: 1px solid #f0f0f0; height: 400px !important; /deep/ .w-e-toolbar{ border: none !important; border-bottom: 1px solid #f0f0f0 !important; background-color: #fff !important; } /deep/ .w-e-text-container{ height: calc(100% - 43px) !important; border: none !important; z-index:1 !important; .w-e-text{ height: 100%; overflow-y: auto !important;} } }</style>

到此這篇關(guān)于Vue中使用wangeditor富文本編輯的問題的文章就介紹到這了,更多相關(guān)wangeditor富文本編輯內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！