vue中使用wangEditor出现光标乱跳的问题 |
您所在的位置：网站首页 › 私享家装饰 › vue中使用wangEditor出现光标乱跳的问题 |
|
问题描述：在vue中使用wangEditor，在修改文章时，输入后发生光标跳转乱跳，导致不能正确输入。 因为封装了组件后，使用父级传入的内容，每次输入都会触发wangEditor的onchange事件，而在onchange事件中又使用了子传父的方式将修改后的值赋给父组件，父组件的值改变后导致子组件wangEditor的值也被修改，所以出现光标总是跳转到最后。此时，并发的还有另外一个问题就是，撤销和恢复点击后无效。 在修改时，不让父组件的值改变，即在子传父后，父级接收赋值给另外一个变量，在提交时在赋值给原始值。 在编辑时，保证初始值传入wangEditor子组件后，子组件的值不被外界修改，直至修改完成。 子组件/components/wangEnduit/editoritem.vue： import E from 'wangeditor' import oss from '@/utils/ali-oss' import { jointOssUrl } from '@/utils' export default { name: 'EditorElem', props: ['catchData', 'content'], data() { return { editor: null } }, // 接收父组件的方法 watch: { content() { // this.editor.txt.html(this.content) // 这是为了解决输入时光标乱跳 // content为编辑框输入的内容，这里我监听了一下值， // 当父组件调用得时候，如果给content赋值了，子组件将会显示父组件赋给的值 if (!this.isChange) { this.editor.txt.html(this.value) } this.isChange = false } }, mounted() { console.log(`html-=======${this.content}`) this.editor = new E(this.$refs.editorElem) this.editor.customConfig.onchange = html => { this.editorContent = html this.catchData(this.editorContent) // 把这个html通过catchData的方法传入父组件 } this.editor.customConfig.customUploadImg = function(files, insert) { // file 是 input 中选中的文件列表 files.map(item => { console.log('file', item) oss .uploadFile(item) .then(res => { console.log(`wangEditor上传---`, res) const imgUrl = jointOssUrl(res.fileUrl) console.log(`fileUrl---`, imgUrl) // insert 是获取图片 url 后，插入到编辑器的方法 // 上传代码返回结果之后，将图片插入到编辑器中 insert(imgUrl) }) .catch(err => { console.log(`err----${err}`) }) }) } this.editor.create() // 创建富文本实例 if (!this.content) { this.editor.txt.html('请编辑内容') } else { this.editor.txt.html(this.content) } } }父组件： import EditorBar from '@/components/wangEnduit/editoritem.vue' export default { data() { return { value:'' } }, methods: { }, components: { EditorBar } } |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |