UEditor适配移动端

最新推荐文章于 2024-03-14 17:36:58 发布

夏木炎

最新推荐文章于 2024-03-14 17:36:58 发布

阅读量4.9k

点赞数 1

分类专栏：前端控件文章标签： UEditor 移动端适配

本文链接：https://blog.csdn.net/xm393392625/article/details/88217958

版权

前端控件专栏收录该内容

5 篇文章 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内容,重新设置样式

<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;"
                }];

夏木炎

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
2
评论
UEditor适配移动端

一.全局内容设置使用getContent()接口，获取编辑器里的内容的HTML文档，用下面的格式去包裹，可以得到一个内容居中，屏幕两边留有一定边距，禁用缩放的页面&lt;!DOCTYPE html&gt;&lt;html lang="zh-CN"&gt;&lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/...
复制链接

扫一扫