百度ueditor自适应(编辑器自适应页面,图片上传宽高,等)

本文介绍了如何使ueditor编辑器实现自适应页面,包括编辑器自身、图片上传的宽高自适应,以及后台插入代码在前台的自适应显示。关键步骤包括编辑器初始化设置、修改iframe.css样式文件和配置ueditor.config.js,以及调整SyntaxHighlighter的CSS样式。
摘要由CSDN通过智能技术生成

1.编辑器自适应页面

在实例化编辑器时加上

 initialFrameWidth:'100%',//初始化编辑器宽度

代码

<!-- 加载编辑器的容器 -->
<script id="editor" type="text/plain"></script>
<%--<textarea name="editor" id="editor"></textarea>--%>
<script>
//实例化编辑器
//建议使用工厂方法getEditor创建和引用编辑器实例,如果在某个闭包下引用该编辑器,直接调用UE.getEditor('editor')就能拿到相关的实例
var ue = UE.getEditor('editor',{
	zIndex : 0,
	initialFrameWidth:'100%',//初始化编辑器宽度
	initialFrameHeight:750,//初始化编辑器高度
	autoHeightEnabled:false,//是否自动长高,默认true
	maximumWords:5000000,      //允许的最大字符数
	topOffset:69,   //浮动时工具栏距离浏览器顶部的高度,用于某些具有固定头部的页面
});

2.图片上传宽高自适应

在Ueditor\themes\iframe.css 加入以下代码(原先的css文件应该是空的,只有一行注释)

/*可以在这里添加你自己的css*/
img {
    max-width: 100%; /*图片自适应宽度*/
}
body {
    overflow-y: scroll !important;
}
.view {
    word-break: break-all;
}
.vote_area {
    display: block;
}
.vote_iframe {
    background-color: transparent;
    border: 0 none;
    height: 100%;
}
#edui1_imagescale{display:none !important;} /*去除点击图片后出现的拉伸边框*/

2.修改Ueditor\ueditor.config.js下面的一句,去掉前面的注释//给编辑器内部引入iframe.css文件。

//,iframeCssUrl: URL + '/themes/iframe.css'

3.后台插入代码前台自适应页面

找到/bdeditor/third-par

  • 0
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

暗恋花香

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值