富文本编辑器UEditor插件edui-scale位置计算不准确的问题解决

在使用UEditor富文本编辑器时遇到图片拖动显示异常的问题,通过修改源码中滚动条高度计算方式成功解决。调整从body.scrollTop改为documentElement.scrollTop。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

工作中的项目用到富文本编辑器,查了资料后用了UEditor,配置后使用,在测试的时候发现一个官网例子上也有的问题:

  富文本的高度是固定的,在上传内容到富文本后,内容多余富文本高度出现了滚动条,当把滚动条滚动到图片  
  处点击图片时,图片四周可拖动的点和线的位置不对,查看官网的例子后,发现这是官网的一个bug。问题图  
  片如下:  
复制代码

  于是便找到UEditor的源文件,试着理作者的逻辑,理了两个小时,终于找到设置拖动条的位置:  
复制代码

  分析了这个计算方式后,发现作者对滚动条相对iframe的滚动高度计算的不对,将  
  me.e `ditor.document.body.scrollTop`改为  
  `me.editor.document.documentElement.scrollTop`后运行计算位置就对了。
  具体原因:  
  iframe的滚动条滚动距离的计算方式为:  
  frames["framename"].document.documentElement.scrollTop:垂直方向  
  frames["framename"].document.documentElement.scrollLeft:水平方向  
  
  
  第一次记录文章,希望自己保持一个好习惯,将学习和工作的心得及时记录下来
复制代码

转载于:https://juejin.im/post/5c777c306fb9a049fd1087a6

### Vue使用 UEditor 富文本编辑器 UEditor 是一款由百度团队开发的强大富文本编辑器,在 Vue 项目中集成此工具可以通过 `vue-ueditor-wrap` 实现。为了配置特定的功能按钮,需修改 `ueditor.config.js` 文件中的 `toolbars` 属性[^1]。 #### 安装 vue-ueditor-wrap 首先安装依赖包: ```bash npm install vue-ueditor-wrap --save ``` 接着在组件内引入并注册该插件: ```javascript import VueUeditorWrap from 'vue-ueditor-wrap' export default { components: { VueUeditorWrap }, } ``` #### 配置 toolbars 自定义工具栏 通过调整 `config.js` 或者直接在初始化参数中指定 `toolbars` 来控制显示哪些操作按钮。下面是一个简单的例子展示如何设置自定义的 toolbar: ```html <template> <div id="app"> <!-- 编辑器容器 --> <VueUeditorWrap v-model="msg" :config="myConfig"></VueUeditorWrap> </div> </template> <script> export default { data() { return { msg: '<p>欢迎使用 ueditor!</p>', myConfig: { // 工具栏上的按钮配置 toolbars: [ ['fullscreen', 'source', '|', 'undo', 'redo'], ['bold', 'italic', 'underline'] ], initialFrameHeight: 300, initialFrameWidth: '100%', autoClearinitialContent: true } }; } }; </script> ``` 对于希望实现宽度和高度自适应的情况,可以在 CSS 中添加样式规则以确保编辑区域能够根据父级元素大小变化而自动调整尺寸[^3]: ```css #edui1 { width: 100%; height: 100%; } #edui1_iframeholder { min-height: 200px; max-height: none !important; overflow-y: hidden; } ``` 需要注意的是,当涉及到文件上传等功能时,可能还需要配合后端服务一起完成相应的逻辑处理[^4]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值