美文网首页
UEditor生成适配移动端的HTML

UEditor生成适配移动端的HTML

作者: Pecksniff1994 | 来源:发表于2019-06-26 15:02 被阅读0次

    全局内容设置

    使用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进行全局的设置;

    • 百度编辑器中添加的图片在手机端不能自适应问题
      做网站经常要用到百度编辑器,页面的渲染我们一般用{$content}来显示,这时候在手机端就会出现首先宽度过宽超过手机尺寸的问题,用max-width:100%;限制之后呢又会发现高度还是那么高,没有进行等比例缩放,找了下度娘下面列一下解决方法:
      经过调试发现,<img>标签中的style就是影响移动端自适应的问题所在。将整个style删除后,既不会影响PC端图片大小,也会使自适应恢复。
      百度编辑器呢会自动把添加的图片设置宽高属性,所以我们要把这两行代码干掉——找到js所在位置ueditor/ueditor/dialogs/image,找到image.js文件,打开编辑,第272行和279行分别设置了宽高属性,将其屏蔽即可style: "width:" + data['width'] + "px;height:" + data['height'] + "px;"
      然后在页面稍加限制
      <div class="test"> {$content} </div> <style> .test img{display:block;max-width:100%;height:auto;} </style>

    • 微信jssdk发给朋友接口

    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]";
        ?>
    
    • setintval的用法
      代码场景:实现每隔一秒执行一次sendMsg();先看一段代码,大家看看有什么问题没。
    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

    相关文章

      网友评论

          本文标题:UEditor生成适配移动端的HTML

          本文链接:https://www.haomeiwen.com/subject/vheccctx.html