百度富文本编辑器（ueditor）的使用

项目中遇上了百度富文本编辑器的使用，官网上给出的文档不够详尽，这里将本人开发项目时遇上的需求配置和问题记录下来。

注：刚开始记录遇到的问题，总结不够多，只能持续更新，作为自己的一个代码经验总结。能做到对遇到的问题进行一对一的解决。

引言：关于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'
          });
        }

 

问题先记录到这里，后面遇到问题持续更新...