本文主要是介绍wangeditor 封装组件及使用，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
版本
"@wangeditor/editor": "^5.1.23",
"@wangeditor/editor-for-vue": "^1.0.2",
封装组件
<template><div><div style="border: 1px solid #ccc; margin-top: 10px"><!-- 工具栏 --><Toolbar style="border-bottom: 1px solid #ccc" :editor="editor" :defaultConfig="toolbarConfig" /><!-- 编辑器 --><Editor:class="isDisabled?'editor-disabled':''":style="'height: '+height+'px'":defaultConfig="editorConfig"v-model="content"@onChange="onChange"@onCreated="onCreated"/></div></div>
</template><script>
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { i18nAddResources, i18nChangeLanguage, i18nGetResources } from '@wangeditor/editor'export default {name: 'WangEditor',components: { Editor, Toolbar },props: {html: {type: String,default: '',},isDisabled:{type: Boolean,default: false},height:{type: Number,default: 400}},data() {return {content: this.html,editor: null,toolbarConfig: {// toolbarKeys: [ /* 显示哪些菜单，如何排序、分组 */ ],/* 隐藏哪些菜单 */excludeKeys: ['bgColor','blockquote','underline','italic','lineHeight','todo','codeBlock','group-more-style','emotion', // 表情'insertLink', // 插入链接'group-image','group-video','insertTable', // 插入表格'divider', // 分割线'fullScreen', // 全屏],},editorConfig: {placeholder: '',// autoFocus: false,// 所有的菜单配置，都要在 MENU_CONF 属性下MENU_CONF: {},},}},watch: {//为了解决实时显示编辑器内容html: {handler(newVal) {this.$nextTick(()=>{if(!newVal){this.content = ''}else{this.content = newVal}if(!this.isDisabled&&this.editor){this.editor.enable()}else if(this.isDisabled&&this.editor){this.editor.disable()}})},deep: true},},methods: {onCreated(editor) {this.editor = Object.seal(editor) // 【注意】一定要用 Object.seal() 否则会报错if(this.isDisabled){this.editor.disable()}else{this.editor.enable()}// 富文本多语言if (this.editor) {// 添加繁体中文语言资源i18nAddResources('zh-TW', {editor: {more: '更多',justify: '對齊',indent: '縮進',image: '圖片',video: '視頻',},common: {ok: '確定',delete: '刪除',enter: '回車',},blockQuote: {title: '引用',},codeBlock: {title: '代碼塊',},color: {color: '文字顏色',bgColor: '背景色',default: '默認顏色',clear: '清除背景色',},divider: {title: '分割線',},emotion: {title: '表情',},fontSize: {title: '字號',default: '默認字號',},fontFamily: {title: '字體',default: '默認字體',},fullScreen: {title: '全屏',},header: {title: '標題',text: '正文',},image: {netImage: '網絡圖片',delete: '刪除圖片',edit: '編輯圖片',viewLink: '查看連結',src: '圖片地址',desc: '圖片描述',link: '圖片連結',},indent: {decrease: '減少縮進',increase: '增加縮進',},justify: {left: '左對齊',right: '右對齊',center: '居中對齊',justify: '兩端對齊',},lineHeight: {title: '行高',default: '默認行高',},link: {insert: '插入連結',text: '連結文本',url: '連結地址',unLink: '取消連結',edit: '修改連結',view: '查看連結',},textStyle: {bold: '粗體',clear: '清除格式',code: '行內代碼',italic: '斜體',sub: '下標',sup: '上標',through: '刪除線',underline: '下劃線',},undo: {undo: '撤銷',redo: '重做',},todo: {todo: '待辦',},listModule: {unOrderedList: '無序列表',orderedList: '有序列表',},tableModule: {deleteCol: '刪除列',deleteRow: '刪除行',deleteTable: '刪除表格',widthAuto: '寬度自適應',insertCol: '插入列',insertRow: '插入行',insertTable: '插入表格',header: '表頭',},videoModule: {delete: '刪除視頻',uploadVideo: '上傳視頻',insertVideo: '插入視頻',videoSrc: '視頻地址',videoSrcPlaceHolder: '視頻文件 url 或第三方 <iframe>',videoPoster: '視頻封面',videoPosterPlaceHolder: '封面圖片 url',ok: '確定',editSize: '修改尺寸',width: '寬度',height: '高度',},uploadImgModule: {uploadImage: '上傳圖片',uploadError: '{{fileName}} 上傳出錯',},highLightModule: {selectLang: '選擇語言',},})if(localStorage.getItem('language')=='en-US'){i18nChangeLanguage('en')}else if(localStorage.getItem('language')=='zh-CN'){i18nChangeLanguage('zh-CN')}else{i18nChangeLanguage('zh-TW')}}},onChange(editor) {let content = editor.getHtml()this.$emit('receiveContent', content)},getEditorText() {const editor = this.editorif (editor == null) returnconsole.log(editor.getText()) // 执行 editor API},printEditorHtml() {const editor = this.editorif (editor == null) returnconsole.log(editor.getHtml()) // 执行 editor API},},mounted() {},beforeDestroy() {const editor = this.editorif (editor == null) returneditor.destroy() // 组件销毁时，及时销毁 editor ，重要！！！},
}
</script><style src="@wangeditor/editor/dist/css/style.css"></style>
<style>
.editor-disabled .w-e-text-container{background: #f3f3f3;cursor: not-allowed;
}
</style>使用
<wang-editor :html.sync="stageGoals" @receiveContent="receiveContent" :height="500"></wang-editor>methods: {receiveContent(content) {this.stageGoals = content},}这篇关于wangeditor 封装组件及使用的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
