UEditor生成适配移动端的HTML

2019-06-26  本文已影响0人  Pecksniff1994

全局内容设置

使用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”,这种模式;

<script>
        var imgs = document.getElementsByTagName('img');

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

在页面的最后加上上面的代码,就可以达到想要的效果了;

文本格式
文本的字体、字号、行间距、列间距等的设置,需要在编辑的时候就设置好,可以摸索一套适合自己的最佳实践;
也可以使用跟图片处理一样的方法,在页面的最后,使用Javascript进行全局的设置;

wx.ready(function(){
        // config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。
            wx.onMenuShareAppMessage({
                title: '', // 分享标题
                desc: '', // 分享描述
                link: '<?=$fenxiangurl?>', // 分享链接
                imgUrl: '', // 分享图标
                //type: 'link', // 分享类型,music、video或link,不填默认为link
                //dataUrl: '', // 如果type是music或video,则要提供数据链接,默认为空
                success: function () { 
                    // 用户确认分享后执行的回调函数

                },
                cancel: function () { 
                    // 用户取消分享后执行的回调函数

                }
            });
    });

里面这个link我们一般分享的是当前页面,找了一种方式

 <?php

    $share= (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off'  $_SERVER['SERVER_PORT'] == 443) ? "https://" : "http://";
    $shareUrl = "$share$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";
    ?>
for(var i=0; i<ids.length-1;i++){
    setInterval(sendMsg(ids[i]),times*1000);
}

然后再看这段:

<script language=javascript>
var int=self.setInterval(function(){sendMsg(ids[i])},1000);
</script>

参考:
关于百度编辑器中图片手机端自适应、微信jssdk当前页链接、setinterval用法
UEditor生成适配HTML

上一篇 下一篇

猜你喜欢

热点阅读