【wangeditor】富文本实现placeholder功能
效果
Template
1 <template> 2 <div> 3 <div class="wangEditor"> 4 <div :id="editorId" ref="toolbar" class="wangEditor-toolbar"></div> 5 <div ref="wangEditor" class="wangEditor-text"> 6 <!-- <span class="wangEditor-deleteIcon el-icon-circle-close" @click="reset"></span>--> 7 </div> 8 </div> 9 <div :style="{position: 'absolute',left: '15px',top: '6px'}"> 10 <input 11 ref="placeHolder" 12 type="text" 13 :placeholder="placeholder" 14 :style="{border: 'none', background: '#fff', outline: 'none', width: '100%', color: '#ccc', margin: '0', height: '20px'}" 15 @mousedown="hidePlace" 16 > 17 </div> 18 </div> 19 </template>
数据
import E from 'wangeditor'
1 props: { 2 value: { 3 type: String, 4 default: '' 5 }, 6 editorId: { 7 type: String, 8 default: '' 9 }, 10 disableTag: { 11 type: Boolean, 12 default: false 13 }, 14 placeholder: { 15 type: String, 16 default: '' 17 } 18 }, 19 data () { 20 return { 21 editor: null, 22 info_: null 23 } 24 },
监听
1 watch: { 2 // value为父组件的传值， 3 value: function (value) { 4 const vm = this; 5 if (value !== this.editor.txt.html()) { 6 vm.editor.txt.html(vm.value) 7 } 8 this.$refs.placeHolder.style.display = this.editor.txt.text().length !== 0 ? 'none' : 'block' 9 vm.$emit('change', value) 10 } 11 },
详解
1. mounted的时候，父组件的数据回显，有数据的时候要将placeholder输入框隐藏掉
1 mounted () { 2 this.setEditor(this.editorId); 3 // this.editor.txt.html(this.value) 4 this.$refs.placeHolder.style.display = this.editor.txt.text().length !== 0 ? 'none' : 'block' 5 },
2. 定义editor的时候，对应的焦点和失焦事件要处理placeholder的显隐
1 methods: { 2 // 隐藏input输入框 3 hidePlace () { 4 this.$refs.placeHolder.style.display = 'none' 5 }, 6 setEditor (id) { 7 const vm = this; 8 vm.editor = new E(vm.$refs.toolbar, vm.$refs.wangEditor); 9 // 配置菜单 10 vm.editor.customConfig.menus = [ 11 'link' // 插入链接 12 ]; 13 vm.editor.customConfig.zIndex = 10; 14 // 焦点和失焦时候，工具栏的显示与隐藏 15 const toolbar = document.getElementById(id); 16 // 焦点的时候，输入框隐藏 17 vm.editor.customConfig.onfocus = function () { 18 vm.$refs.placeHolder.style.display = 'none' 19 setTimeout(() => { 20 // console.log('???', toolbar.nextSibling.nextSibling); 21 toolbar.style.display = 'block'; 22 toolbar.nextSibling.nextSibling.style.borderColor = '#1c61fc' 23 }, 100); 24 }; 25 // 失焦的时候，editor有内容则输入框隐藏，否则出现 26 vm.editor.customConfig.onblur = function () { 27 vm.$refs.placeHolder.style.display = vm.editor.txt.text().length !== 0 ? 'none' : 'block' 28 setTimeout(() => { 29 toolbar.style.display = 'none'; 30 // 将当前页面的所有富文本处理,第一个边框为灰色，其他的边框都无色 31 const richDom = document.getElementsByClassName('wangEditor-text') 32 for (var i = 0; i < richDom.length; i++) { 33 if (i === 0) { 34 richDom[i].style.borderColor = '#cdcdcd' 35 } else { 36 richDom[i].style.borderColor = 'transparent' 37 } 38 } 39 }, 100); 40 }; 41 // editor change事件，同步内容 42 vm.editor.customConfig.onchange = (html) => { 43 vm.info_ = html; // 绑定当前组件的值 44 vm.$emit('change', vm.info_); // 将内容同步到父组件中 45 }; 46 const ED = new E('.wangEditor') 47 ED.customConfig.zIndex = 100 48 // 创建富文本编辑器 49 vm.editor.create(); 50 vm.editor.selection.getSelectionText(); 51 vm.editor.txt.html(vm.value); 52 // 启用与禁用 53 if (vm.disableTag) { 54 vm.editor.$textElem.attr('contenteditable', false) 55 } else { 56 vm.editor.$textElem.attr('contenteditable', true) 57 } 58 // 启用与禁用时的文字颜色 59 const editorDom = document.getElementsByClassName('w-e-text') 60 for (var i = 0; i < editorDom.length; i++) { 61 // console.log(editorDom[i].contentEditable); 62 if (editorDom[i].contentEditable === 'false') { 63 editorDom[i].style.color = '#606266' 64 } else { 65 editorDom[i].style.color = '#606266' 66 } 67 } 68 }, 69 // 清空内容 70 reset () { 71 this.editor.txt.clear(); 72 this.$emit('change', '') 73 } 74 }
