Ueditor自定义默认宽度高度

百度ueditor自适应(编辑器自适应页面,图片上传宽高,等) 1.编辑器自适应页面 在实例化编辑器时加上 initialFrameWidth:'100%',//初始化编辑器宽度 代码 <!-- 加载编辑器的容器 --> <script id="editor" type="text/plain"></script> <%--<textarea name="editor" id="editor... 阅读详情

如题。

        最近需要使用到网页后台富文本编辑器。经过同学推荐,最后决定使用百度家的Ueditor.

官方地址:http://ueditor.baidu.com/website/

贴吧地址:ueditor讨论吧

官方提供了网页上非常方便的自定义工具栏的功能。自定义之后直接下载对应的代码包并按照文档部署到项目中即可。其中主要的问题是路径的配置。

首先是将下载好的代码包发布到我们项目的根目录下面。然后在需要添加富文本编辑器的页面头部添加如下代码:

        

<script type="text/javascript" src="相对该文档的路径/ueditor/ueditor.config.js"></script>
<script type="text/javascript" src="相对该文档的路径/ueditor/ueditor.all.js"></script>
<script>
	window.UEDITOR_HOME_URL = "/项目相对网址池绝对路径/ueditor";
</script>
配置路径这一块是非常重要的。特别是下面的Ueditor的路径,是相对我们整个代码库的目录的。

配置完成之后,直接在我们网页中的<textarea>标签下面添加ueditor的初始化代码:

<script type="text/javascript">
   	var editor = new UE.ui.Editor({initialFrameHeight:100,initialFrameWidth:400 });
        editor.render("actDescribe");
</script>

官方的文档并没有给出如何设置ueditor的宽度和高度的说明。这是我在网上网友那里找到的解决方法。在声明编辑器的变量的时候,在参数列表中添加对initialFrameHeight和initialFrameWidth的设置即可。注意,数值后面不需要添加px。



可是,这种方法有时候奏效有时候也不奏效,因为我碰过一种情况就是无论如何调整initialHeight和initialWidth的数值,编辑器的大小都还是不会改变。这个时候,我发现,可以通过调整editor所跟随的textarea的宽高来撑开editor的大小。这也是一种方法,各位同学在官方说明文档出来之前可以两种方法都尝试一下。

当然,好用的文本编辑器还是有很多的,例如kindeditor,之前准备使用这个的,而其文档方面也比较齐全,同时,整个编辑器的size也比较小,对网页的加载速度比较有利。百度的Ueditor还是有点庞大。加载时会有卡顿的速度。估计是我对底层代码的研究不够,多了很多不必要的内容。慢慢研究或许可以使得Ueditor变小。

在 UEditor 中插入 Bilibili 视频 属性,或者使用 CSS 样式和响应式布局,可以轻松解决 Bilibili 视频宽高太小的问题。推荐使用 CSS 的响应式方案,以确保视频在不同设备上的兼容性和美观性。在 UEditor 中插入 Bilibili 视频时,默认的 iframe 嵌入代码可能会导致视频宽高太小,影响观看体验。如果你希望更灵活地控制视频的大小,可以使用内联样式或外部 CSS 来定义宽高。如果视频无法正常播放,检查网络连接是否正常,以及嵌入代码是否完整。为了适配不同屏幕尺寸,可以使用百分比设置宽高。属性,指定视频的宽度和高度。 阅读详情

相关推荐

autoDL算力云装Xinference[坑与步骤]

在页面直接点击下载会出现下着下载进度条消失,试了几次才出现这个报错,现在我们就继续安装缺少的包吧。这一步成功绕开了系统盘空间限制。先租用一个合适的服务器,建议不要选最新版本,跟我选的一样即可,不然后面会出现。最近在 AutoDL 上尝试部署。🚫 不要直接使用以下命令。点击下面链接即可打开。

ngadminq的博客 2387

ueditor 设置html长度,UEditor百度富文本编辑器 设置百分比宽度

UEditor 百度富文本编辑器的 initialFrameWidth 属性默认值是1000,设置 initialFrameWidth=null 时,编辑器会在第一次加载的时候获取屏幕宽度,然后赋值给 initialFrameWidth 属性,这样确实可以在第一次加载时适应屏幕宽度,但是似乎宽度稍微过了一点点。而且当你改变浏览器大小时,会有很严重的排版BUG,由于它不会自适应宽度。所以会出现编辑器...

weixin_42343756的博客 1458

配置VScode编译、调试STM32(一)手动配置makefile和debug

做嵌入式的朋友们都应该有过想要有个功能强大的IDE或者编辑器,Keil MDK5、IAR EWARM是用的比较普遍的平台了,但是两者在编辑器方面都比较弱势,当然可以设置 或者使用外部编辑器,像Sourceinsight、notePad++这样,但毕竟需要切换回来进行Build、Debug,非常麻烦。 VScode从发布至今口碑一直很好,而且里面有非常多的插件,比如彩虹括号、Code Runner、...

hanhe0551的博客 4290

Ueditor编辑器---宽度高度自适应

Ueditor 富文本编辑器---宽度高度自适应 1、宽度自适应:设置 initialFrameWidth: null var ue = UE.getEditor('editor',{ initialFrameWidth:null ,//宽度随浏览器自适应 wordCount: false, //关闭字数统计 elementPathEnabled : false...

weixin_30423977的博客 3158

利用python爬取东方财富网股吧评论并进行情感分析(一)

利用python爬取东方财富网股吧评论(一) python-东方财富网贴吧文本数据爬取 分享一下写论文时爬数据用到的代码,有什么问题或者改善的建议的话小伙伴们一起评论区讨论。 新的改变 我们对Markdown编辑器进行了一些功能拓展与语法支持,除了标准的Markdown编辑器功能,我们增加了如下几点新功能,帮助你用它写博客: 全新的界面设计 ,将会带来全新的写作体验; 在创作中心设置你喜爱的代码高亮样式,Markdown 将代码片显示选择的高亮样式 进行展示; 增加了 图片拖拽 功能,你可以将本地的图片直

YMG521000的博客 1万+

PCF8591实战指南:从IIC通信到STM32的ADC/DAC配置(附完整代码)

本文详细介绍了PCF8591芯片在STM32开发中的实战应用,涵盖IIC通信协议、ADC/DAC配置及完整代码实现。通过解析DATA SHEET关键参数,提供硬件连接指南、控制字节配置技巧和常见问题解决方案,帮助开发者快速掌握这款8位模数/数模转换器的使用,实现精确的模拟信号处理。

y7z8a的博客 541

第一天开通,记录下ueditor的大小设置

新人一枚,多多关照。 之前在使用ueditor的时候,大小设置是个问题,所以去百度了很久,看了下csdn上的其他同人的解决办法,最多的还是在ueditor.config.js里 设置 ,initialFrameWidth:240 //初始化编辑器宽度,默认1000 ,initialFrameHeight:220 //初始化编辑器高度,默认320 这两个参数,然而并没什么卵用、、

gzxtdn的博客 1618

OpenCV-Python实战(10)——详解 OpenCV 轮廓检测

在计算机视觉领域,轮廓通常指图像中对象边界的一系列点。因此,轮廓通常描述了对象边界的关键信息,包含了有关对象形状的主要信息,该信息可用于形状分析与对象检测和识别。在本文中,将首次通过简单示例了解轮廓的基本概念,然后通过实际示例来了解如何检测和压缩轮廓,最后利用介绍如何利用图像矩描述检测到的轮廓属性。

盼小辉丶的博客 3万+

百度编辑器 UEditor 使用方法 及 如何设置固定高度且带滚动条及 如何设置修改传值的 name 属性

1、ueditor 配置及赋值传值 <form action="" method="post"> 新闻标题: <input type="text" name="title" class="input" required> <input type="hidden" name="content" id="contents" required> //设置表单传值隐藏域 新闻内容: <div id="editor" style="height:500px;"&g

空心人的博客 4645

C#串口通信上位机开发实战:轻松实现硬件控制与数据交互

摘要:本文介绍如何使用C#开发串口通信上位机应用,实现与硬件设备(如传感器、PLC等)的数据交互。文章涵盖串口通信原理、开发环境配置、功能实现(串口连接管理、数据收发、实时显示)及UI设计,重点讲解SerialPort类的应用、多线程数据接收处理和错误优化。通过Windows Forms构建直观界面,帮助开发者快速掌握工业控制和自动化系统中的串口通信技术,为物联网和智能设备开发提供实用解决方案。全文约150字。

这里只有干货:从 Modbus 通信到 MES 对接,从 YOLO 训练到工控机部署,带你搞定工业软件开发全流程。 3038

Google Earth Engine(GEE)——使用归一化燃烧指数 (NBR) 绘制地表烧伤严重程度图

归一化燃烧指数(Normalized Burn Ratio, NBR)是一种遥感指标,用于评估野火或烧伤地面后的植被恢复情况。NBR能增强较大范围的火灾区域,如大于200公顷。它是通过比较远红外波段 (SWIR) 和近红外波段 (NIR) 的反射率来计算的。SWIR波段测量烧伤地面的反射率,NIR波段测量没有受到烧伤影响的植被的反射率。NBR的计算公式为:NBR =(NIR-SWIR)/(NIR + SWIR)。其中,NIR为近红外波段,SWIR为短波红外波段。

此星光明博客 3466

百度编辑器php上传图片配置,百度ueditor上传图片时设置默认宽高度

我也是逼了dog了,百度编辑器官方文档其实做的很不详细,都是些基本的用法,想设置个上传图片默认尺寸都找不到相应文档。进过哥的不屑努力,终于是配置好了,其实也是很简单的,加了一行代码。。。。。找到编辑器根目录下面的ueditor.all.js ,一打开吓到哥了,上万行代码,不过不要怕,search 一下 :cllback() 找到这个函数function callback(){try{var lin...

weixin_30825953的博客 311

Open3D 基于法线的双边滤波

基于法线的双边滤波是一种用于点云平滑的技术,它结合了点与其邻域点之间的几何距离和法线方向的相似性,从而在去除噪声的同时保留几何特征。这种滤波方法广泛应用于点云处理领域,尤其是在需要保留表面细节和边缘的场景中。

纵马踏花向自由 2500

百度ueditor上传图片时如何设置默认宽高度

百度ueditor上传图片时如何设置默认宽高度 一、总结 一句话总结:直接css或者js里面限制一下就好,可以用html全局限制一下图片的最大高度 直接css或者js里面限制一下就好,可以用html全局限制一下图片的最大高度 1、如何改变ueditor.umeditor中插件的大小? 其实也就是改css 或者用js改css 2、如何修改所有html,js插件的样...

weixin_30439031的博客 1652

华为的C语言编程规范.pdf

华为技术有限公司内部技术规范。本规范制定了编写C语言程序的基本原则、规则和建议。从代码的清晰、简洁、可测试、安全、程序效率、可移植各个方面对C语言编程作出了具体指导。

温度PID控制PLC程序

温度PID稳定控制程序,适用于欧姆龙PLC,对其他PLC也具有很大参考价值

ueditor 工具栏配置_ueditor 单行工具栏 高度设置

ueditor 单行工具栏的高度如何设置?初次使用ueditor,是在vue中使用的,用的单行工具栏设置:this.ue = ueditor.getEditor(this.ueId, {// serverUrl: '', // 服务器统一请求接口路径toolbars: [['paragraph','fontfamily','fontsize','bold','italic','underline'...

weixin_39632471的博客 570

迈瑞BS系列全自动生化分析仪LIS协议接口手册(内含HL7和ASTM)

迈瑞BS系列全自动生化分析仪LIS协议接口手册,内含HL7和ASTM)

UEditor富文本WEB编辑器自定义默认值设置方法

1.在使用UEditor编辑器编写内容时你会发现,当输入的内容较多时,编辑框的边框高度也会自动增加,若希望输入内容较多时以拉框滚动的效果。 方法:找到Ueditor文件根目录下的ueditor.config.js,用编译器打开,看到282~286行代码如下: //scaleEnabled //是否可以拉伸长高,默认true(当开启时,自动长高失效...

bacongti2381的博客 705

锂电池充电器电路设计 里面有电路

锂电池充电器电路设计 里面有电路 3.7V升压到5V电路设计。

ueditor设置html,UEditor富文本WEB编辑器自定义默认值设置方法

1.在使用UEditor编辑器编写内容时你会发现,当输入的内容较多时,编辑框的边框高度也会自动增加,若希望输入内容较多时以拉框滚动的效果。方法:找到Ueditor文件根目录下的ueditor.config.js,用编译器打开,看到282~286行代码如下://scaleEnabled//是否可以拉伸长高,默认true(当开启时,自动长高失效)//,scaleEnabled:false//,minF...

weixin_42298817的博客 1182

vue3.0中如何使用ueditor

1.在官网下载一个ueditor版本[https://ueditor.baidu.com/website/download.html],解压后放到public文件下的static文件中重命名为Editor (自己建立一个static文件,直接放到public文件下会出错)。 2.修改相应的配置。 ueditor.config.js中 window.UEDITOR_HOME_URL = ...

weixin_30675247的博客 2378

ueditor取消文本编辑器的自动拉伸高度、宽度。

1.首先引入富文本编辑器 <script type="text/javascript" src="<%=basePath%>js/ueditor/ueditor.config.js"></script> <script type="text/javascript" src="<%=basePath%>js/ueditor/ueditor...

weixin_30247307的博客 688

phpcms9.6 ueditor_PHPCMS V9使用UEditor和七牛云存储的方法

https://github.com/widuu/utf8_qiniu_ueditor目录命名为uediter,放在/statics/js/目录下面;2、修改/phpcms/libs/classes/下的form.class文件:if(!defined('EDITOR_INIT')) {$str = '';define('EDITOR_INIT', 1);}替换为:if(!defined('EDI...

weixin_39622225的博客 118

百度的富文本编辑器UEditor批量添加图片自动加上宽度和高度的属性

若是没有对编辑器做任何配置直接添加图片的话,显示的html内容如下图所示:它会显示出原图片尺寸 所以必须要对图片的初始显示尺寸做控制:ueditor文件中找到image.js文件 在image.js中找到如下图所示: 在此处添加上所要想显示的尺寸! http://ueditor.baidu.com/doc/#COMMAND::insertimage 在image.js中使...

sdx1237的博客 2360
上一篇: 网页前端兼容问题
下一篇: css样式优先级
GiantChan
博客等级 码龄16年 76粉丝 108原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值