UEditor百度富文本编辑器自适应DIV的宽度

已于 2024-01-12 09:15:56 修改
阅读量641 收藏 1
点赞数 1
CC 4.0 BY-SA版权
分类专栏： 前端 文章标签： 百度编辑器 UEditor 富文本编辑器
于 2021-05-28 00:35:56 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/wushengyong1996/article/details/117341462
本文详细介绍了UEditor百度富文本编辑器在初始宽度设置上的问题及解决办法。默认initialFrameWidth为1000像素，无法自适应屏幕宽度。通过设置initialFrameWidth为null，编辑器在初次加载时能获取屏幕宽度，但宽度可能超出上方灰色条，并且在浏览器尺寸变化时出现排版问题。为解决此问题，可以将ueditor.config.js中initialFrameWidth属性改为'100%'，使编辑器宽度自适应容器。修改后，编辑器首次加载和浏览器缩放时能保持良好适配。

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

UEditor百度富文本编辑器的initialFrameWidth属性,默认值是1000.

不能够自适应屏幕宽度.如图1:

刚开始的时候,我是直接设置initialFrameWidth=null的.效果如图2:

这样子UEditor百度富文本编辑器会在第一次加载的时候获取屏幕宽度,然后赋值给initialFrameWidth属性.

这样子确实是可以在第一次加载的时候适应屏幕宽度,但是却似乎宽度稍微过了一点点,超过上面的灰条了.而且这里还有一个问题:

当你改变浏览器大小时,会有个很严重的排版BUG.

由于它不会自适应宽度.所以会发现编辑器宽度溢出.如图3:

解决方案:

1.打开/ueditor/ueditor.config.js

找到initialFrameWidth属性,默认值是1000.即是initialFrameWidth: 1000

把值更改为'100%' , 即是initialFrameWidth: '100%'

保存后,刷新浏览器再看看...

效果如图4:

百度富文本编辑器UEditor 图片宽度100%自适应，手机端
qq_63608386的博客
03-14 1078
修改ueditor.all.js的23774行（左右，不一定）和24533（左右，不一定），不行就搜索。有些时候富文本编辑器的图片在手机端显示超出，没有自动100%
百度ueditor自适应(编辑器自适应页面，图片上传宽高，等)
闲时不练功，忙时一场空
09-24 3436
1.编辑器自适应页面 在实例化编辑器时加上 initialFrameWidth:'100%',//初始化编辑器宽度 代码 <!-- 加载编辑器的容器 --> <script id="editor" type="text/plain"></script> <%--<textarea name="editor" id="editor...
Ueditor宽度自适应
weixin_34138521的博客
03-15 917
2019独角兽企业重金招聘Python工程师标准>>> ...
WebFuture：编辑器默认宽度100%的设置方法
最新发布
bbsh2099的博客
05-27 233
编辑器显示的页面宽度默认是根本浏览器大小而自动调节的，怎样设置默认设置100%的页面宽度？替换成nodeViewWidth = '100%';
UEditor自动调节宽度
weixin_33882452的博客
12-08 448
UEditor自动调节宽度 一、总结 一句话总结：ueditor是网页的产物，没有API我们照样可以像调网页元素那样调，一样的，这里是改变插件的css样式实现 启示： 百度 文档 引擎 ueditor 网页 产物 调 搜索引擎：百度上啥都有，傻傻找API和文档找不到的时候一定记得去搜索引擎上面找一找 网页产物：ueditor是网页的产物，没有API我们照样可以像调网页元素那样调，一样...
Ueditor编辑器---宽度高度自适应
weixin_30423977的博客
01-16 3056
Ueditor 富文本编辑器---宽度高度自适应 1、宽度自适应：设置 initialFrameWidth: null var ue = UE.getEditor('editor',{ initialFrameWidth:null ,//宽度随浏览器自适应 wordCount: false, //关闭字数统计 elementPathEnabled : false...
UEditor百度富文本编辑器--让编辑器自适应宽度的解决方案
w36680130的博客
11-08 176
UEditor百度富文本编辑器--让编辑器自适应宽度的解决方案
百度富文本编辑器ueditor上传图片宽高超范围问题2018.7.3补充
07-03
【百度富文本编辑器ueditor上传图片宽高超范围问题详解】 在使用百度富文本编辑器ueditor时，用户可能会遇到一个常见的问题：当上传的图片尺寸超过预设限制时，图片在编辑器内显示不全，同时在网页发布后也可能导致...
原生js ---- ueditor富文本编辑器实例
10-17
本实例聚焦于"原生JS"实现的"ueditor"富文本编辑器，这是一款功能强大且广泛应用的开源编辑器，它以其丰富的定制性和高效的性能著称。 首先，ueditor提供了两种主要的配置方式：默认的toolbar和自定义的toolbar。...
百度富文本编辑器  ueditor 的基本使用
weixin_43594183的博客
04-01 3375
下载 html部分引入百度编辑器 配置文件、编辑器源码文件 放置编辑器的位置 <div><script id="container" name="content" type="text/plain" style="width:1106px;" data-bind="value:item_cont"></script></div> 可...
使用ueditor打开全屏时，设置宽度
我是阿兰的博客
01-08 1274
I.打开全屏时出现以下这种情况： II.个人解决方式： 1.全局搜索 _updateFullScreen 这个方法 2.修改全屏时的宽度 _updateFullScreen: function() { if (this._fullscreen) { var vpRect = uiUtils.getViewportRect(); this.getDom().style.cssText = "border:0;position:absolute
富文本框umeditor的大小自适应
orange_cccc的博客
10-30 372
副文本框resize @HostListener(‘window:resize’,[’$event’]) onWindowResize(event:Event){ this.changeUmeditorWidth(); } changeUmeditorWidth(){ let articlebox = document.getElementById(‘umeditorP’); setTimeout(() => { this.articleBoxHeight = articlebox.clientHei
UEditor手动调节其宽度
weixin_30561425的博客
08-25 521
其高度一般不考虑，给个初始高度，然后任其自动扩展就行，对于其宽度，有两种思路，一种是调节其所在的DIV的宽度，让其自动填充，另一种是直接调节编辑器的宽度： adjust_editor_size: function () { //注：由于编辑器的宽度官方并没有给出有效的调节方法，这里我们用调节其所属DIV的宽度的方式来调其宽度（让编辑器自动跟随其父变化...
ueditor宽度随网页变化
01-05 2546
var ue = UE.getEditor('editor', { initialFrameWidth: null,//设置为null即可 initialFrameHeight: 425, }); 修改ueditor.config.js貌似没用
Ueditor 自动设置上传图片的宽度或高度
weixin_30532837的博客
06-15 750
Uedior在上传图片的生活，需要自动设置上传图片的宽度或高度属性。该方法只能用于多图上传组件，单图上传无法使用。 该方法基于 ueditor 1.4.3 版本制作： 1.添加属性字段，在config.json文件中： /* 上传图片配置项 */字段下添加： "imageWidth": 700, /* 上传图片宽度指定， 1.4.3官方版本无此参数，自行添加*/ "i...
Ueditor表格增加自定义表格宽度功能
songyajun_zzuli的专栏
07-25 3290
之前有用户提到Ueditor的表格，不能设置表格的宽度，所以自定义预览页面的时候，导致表格不是自己想要的样式。所以简单了做了个功能，使用户可以做简单的更改。 1. 找到dialogs/table文件夹，修改edittable.html文件，在 <li> <label><input type="radio" id="J_autoSizePage" name...
ueditor 设置html长度,UEditor百度富文本编辑器 设置百分比宽度
weixin_42343756的博客
06-18 1378
UEditor 百度富文本编辑器的 initialFrameWidth 属性默认值是1000，设置 initialFrameWidth=null 时，编辑器会在第一次加载的时候获取屏幕宽度，然后赋值给 initialFrameWidth 属性，这样确实可以在第一次加载时适应屏幕宽度，但是似乎宽度稍微过了一点点。而且当你改变浏览器大小时，会有很严重的排版BUG，由于它不会自适应宽度。所以会出现编辑器...
vue富文本编辑器插件,edui-toolbor
01-03
### 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、付费专栏及课程。

余额充值