首页 > 分享 > UEditor适配移动端

UEditor适配移动端

最新推荐文章于 2024-10-08 14:19:42 发布

夏木炎 于 2019-03-06 08:40:53 发布

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

一.全局内容设置

使用getContent()接口,获取编辑器里的内容的HTML文档,用下面的格式去包裹,可以得到一个内容居中,屏幕两边留有一定边距,禁用缩放的页面

<!DOCTYPE html>

<html lang="zh-CN">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

<style> html,body{ height:100%; width:100%; padding:0; margin:0; } #content{ width:90%; height:100%; padding:0; margin:10px auto; } </style>

</head>

<body>

#CONTENT

</body>

<script> var imgs = document.getElementsByTagName('img'); for(var i in imgs) { var img = imgs[i]; img.style.width='100%'; img.style.height='auto'; } </script>

</html>

二.图片标签修改

百度编辑器编辑出来的img标签是带有宽高的,而我们想在移动端实现的是,width=”100%” height=”auto”,这种模式

方案一:将加载后的编辑器img内容,重新设置样式

<script> var imgs = document.getElementsByTagName('img'); for(var i in imgs) { var img = imgs[i]; img.style.width='100%'; img.style.height='auto'; } </script>

方案二:修改百度编辑器默认样式,找到image.js,注释或修改默认样式style: "width:" + data['width'] + "px;height:" + data['height'] + "px;"

getInsertList: function () {

var data = this.getData();

if(data['url']) {

return [{

src: data['url'],

_src: data['url'],

width: data['width'] || '',

height: data['height'] || '',

border: data['border'] || '',

floatStyle: data['align'] || '',

vspace: data['vhSpace'] || '',

title: data['title'] || '',

alt: data['title'] || ''

}];

相关知识

移动端
手机移动端快速开发
如何从零高效的开发一款适配 Android 和 iOS 的移动端App
Html+Css+js实现春节倒计时效果(移动端和PC端)
移动Web实训DAY
一分钟告诉你建行移动端网络学习怎么学
简约排版鲜花植物类移动端店铺首页
基于深度卷积神经网络的移动端花卉识别系统
电商平台移动端应用开发及维护服务合同.doc
下列哪项属于移动端交易?

网址: UEditor适配移动端 https://m.huajiangbk.com/newsview948546.html

所属分类:花卉
上一篇: vue项目(vue
下一篇: vue项目解决移动端适配的问题