UEditor适配移动端

电玩女神 2022-03-12 12:56 545阅读 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”，这种模式

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

**方案二：修改百度编辑器默认样式，找到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;"
                    }];