项目中遇上了百度富文本编辑器的使用,官网上给出的文档不够详尽,这里将本人开发项目时遇上的需求配置和问题记录下来。
注:刚开始记录遇到的问题,总结不够多,只能持续更新,作为自己的一个代码经验总结。能做到对遇到的问题进行一对一的解决。
引言:关于vue里怎么引入这个富文本编辑器就不解释了,博客上、B站上都有很多讲解,最终的结果都是这样一个目录结构:
1、图片上传后尺寸问题
解决思路:这个文本编辑器里有个类似钩子的函数,可以在上传选择图片点击确定之后触发,我们可以在这个函数里面给这个图片元素添加style=" **** " 样式,对图片进行尺寸限制。
解决步骤:
1、
2、
2、点击富文本编辑器后,调节大小的蓝框严重偏离图片的问题
解决思路:这个文本编辑器里有个函数可以调节蓝框偏移量,找到该函数配置即可
解决步骤:
1、
2、
提供复制的代码:
attachTo: function (targetObj) {var me = this,target = me.target = targetObj,resizer = this.resizer,imgPos = domUtils.getXY(target),iframePos = domUtils.getXY(me.editor.iframe),editorPos = domUtils.getXY(resizer.parentNode);domUtils.setStyles(resizer, {'width': target.width + 'px','height': target.height + 'px','left': iframePos.x + imgPos.x - me.editor.document.body.scrollLeft - editorPos.x - parseInt(resizer.style.borderLeftWidth) + 'px',//修改前// 'top': iframePos.y + imgPos.y - me.editor.document.body.scrollTop - editorPos.y - parseInt(resizer.style.borderTopWidth) + 'px'//修改后'top': iframePos.y + imgPos.y - me.editor.document.documentElement.scrollTop - editorPos.y - parseInt(resizer.style.borderTopWidth) + 'px'});}
问题先记录到这里,后面遇到问题持续更新...