UEditor适配移动端

全屏阅读
  • 基本信息

一.全局内容设置

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

<!DOCTYPE html>
<html>
<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'] || ''
                    //style: "width:" + data['width'] + "px;height:" + data['height'] + "px;"
                }];

顶一下
(0)
100%
订阅 回复
踩一下
(0)
100%
» 郑重声明:本文由mpxq168发布,所有内容仅代表个人观点。版权归恒富网mpxq168共有,欢迎转载, 但未经作者同意必须保留此段声明,并给出文章连接,否则保留追究法律责任的权利! 如果本文侵犯了您的权益,请留言。

目前有 0 条留言 其中:访客:0 条, 博主:0 条

给我留言

您必须 [ 登录 ] 才能发表留言!