电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁技術文章
文章詳情頁

Vue中使用wangeditor富文本編輯的問題

瀏覽:115日期:2022-10-05 18:15:05

wangEditor是基于javascript和css開發的 Web富文本編輯器, 輕量、簡潔、易用、開源免費。在我們實際項目上還是比較頻繁應用到的,下面出個案例供大家參考學習…

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

富文本編輯器截圖:

Vue中使用wangeditor富文本編輯的問題Vue中使用wangeditor富文本編輯的問題Vue中使用wangeditor富文本編輯的問題

<!--富文本編輯器。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: ’’}, // 菜單選項 menus: { type: Array, default(){ return [ ’bold’, // 粗體 ’italic’,//斜體 ’underline’,//下劃線 ’fontSize’, // 字號 ’strikeThrough’,//刪除線 ’image’, // 插入圖片 ’undo’, // 撤銷 // ’fontName’, // 字體 // ’italic’, // 斜體 // ’underline’, // 下劃線 // ’strikeThrough’, // 刪除線 // ’foreColor’, // 文字顏色 // ’backColor’, // 背景顏色 // ’link’, // 插入鏈接 // ’list’, // 列表 // ’justify’, // 對齊方式 // ’quote’, // 引用 // ’emoticon’, // 表情 // ’image’, // 插入圖片 // ’table’, // 表格 // ’video’, // 插入視頻 // ’code’, // 插入代碼 // ’undo’, // 撤銷 // ’redo’, // 重復 ]; }, }, }, data(){ return { editor: {}, // 編輯器對象 _value: ’’, // 內容備份,用于watch時候判斷,只在編輯器輸入時改變 }; }, 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: ’親,圖片正在拼命地上傳中,請稍等...’, 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); // 針對數據異步獲取的這里無法立即綁定,在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>

到此這篇關于Vue中使用wangeditor富文本編輯的問題的文章就介紹到這了,更多相關wangeditor富文本編輯內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網!

標簽: Vue
相關文章:
主站蜘蛛池模板: 蓝牙音频分析仪-多功能-四通道-八通道音频分析仪-东莞市奥普新音频技术有限公司 | 儿童乐园|游乐场|淘气堡招商加盟|室内儿童游乐园配套设备|生产厂家|开心哈乐儿童乐园 | 氢氧化钾厂家直销批发-济南金昊化工有限公司 | 黑龙江京科脑康医院-哈尔滨精神病医院哪家好_哈尔滨精神科医院排名_黑龙江精神心理病专科医院 | 电动打包机_气动打包机_钢带捆扎机_废纸打包机_手动捆扎机 | 低压载波电能表-单相导轨式电能表-华邦电力科技股份有限公司-智能物联网综合管理平台 | 翰墨AI智能写作助手官网_人工智能问答在线AI写作免费一键生成 | 中国品牌门窗网_中国十大门窗品牌_著名门窗品牌 | 上海单片机培训|重庆曙海培训分支机构—CortexM3+uC/OS培训班,北京linux培训,Windows驱动开发培训|上海IC版图设计,西安linux培训,北京汽车电子EMC培训,ARM培训,MTK培训,Android培训 | 柔性输送线|柔性链板|齿形链-上海赫勒输送设备有限公司首页[输送机] | 东莞压铸厂_精密压铸_锌合金压铸_铝合金压铸_压铸件加工_东莞祥宇金属制品 | 电伴热系统施工_仪表电伴热保温箱厂家_沃安电伴热管缆工业技术(济南)有限公司 | Safety light curtain|Belt Sway Switches|Pull Rope Switch|ultrasonic flaw detector-Shandong Zhuoxin Machinery Co., Ltd | CTP磁天平|小电容测量仪|阴阳极极化_双液系沸点测定仪|dsj电渗实验装置-南京桑力电子设备厂 | 网站建设-高端品牌网站设计制作一站式定制_杭州APP/微信小程序开发运营-鼎易科技 | 塑料检查井_双扣聚氯乙烯增强管_双壁波纹管-河南中盈塑料制品有限公司 | 周易算网-八字测算网 - 周易算网-宝宝起名取名测名字周易八字测算网 | 国标白水泥,高标号白水泥,白水泥厂家-淄博华雪建材有限公司 | 手机游戏_热门软件app下载_好玩的安卓游戏下载基地-吾爱下载站 | 国际金融网_每日财经新资讯网 | 涿州网站建设_网站设计_网站制作_做网站_固安良言多米网络公司 | 工业车间焊接-整体|集中除尘设备-激光|等离子切割机配套除尘-粉尘烟尘净化治理厂家-山东美蓝环保科技有限公司 | 佛山市钱丰金属不锈钢蜂窝板定制厂家|不锈钢装饰线条|不锈钢屏风| 电梯装饰板|不锈钢蜂窝板不锈钢工艺板材厂家佛山市钱丰金属制品有限公司 | 精密模具加工制造 - 富东懿 | 光谱仪_积分球_分布光度计_灯具检测生产厂家_杭州松朗光电【官网】 | 长沙一级消防工程公司_智能化弱电_机电安装_亮化工程专业施工承包_湖南公共安全工程有限公司 | 顺景erp系统_erp软件_erp软件系统_企业erp管理系统-广东顺景软件科技有限公司 | 软文发布-新闻发布推广平台-代写文章-网络广告营销-自助发稿公司媒介星 | 阻垢剂-反渗透缓蚀阻垢剂厂家-山东鲁东环保科技有限公司 | ◆大型吹塑加工|吹塑加工|吹塑代加工|吹塑加工厂|吹塑设备|滚塑加工|滚塑代加工-莱力奇塑业有限公司 | 体视显微镜_荧光生物显微镜_显微镜报价-微仪光电生命科学显微镜有限公司 | 储能预警-储能消防系统-电池舱自动灭火装置-四川千页科技股份有限公司官网 | 挤塑板-XPS挤塑板-挤塑板设备厂家[襄阳欧格] | 非小号行情 - 专业的区块链、数字藏品行情APP、金色财经官网 | 液压升降平台_剪叉式液压/导轨式升降机_传菜机定做「宁波日腾升降机厂家」 | 希望影视-高清影视vip热播电影电视剧免费在线抢先看 | 无机纤维喷涂棉-喷涂棉施工工程-山东华泉建筑工程有限公司▲ | 气动机械手-搬运机械手-气动助力机械手-山东精瑞自动化设备有限公司 | B2B网站_B2B免费发布信息网站_B2B企业贸易平台 - 企资网 | 新材料分散-高速均质搅拌机-超声波分散混合-上海化烁智能设备有限公司 | 石家庄救护车出租_重症转院_跨省跨境医疗转送_活动赛事医疗保障_康复出院_放弃治疗_腾康26年医疗护送转诊团队 |