UEditor生成适配移动端的HTML_ueditor 移动端

作者：很楠不爱3 | 2024-03-24 02:55:17

踩

ueditor 移动端

全局内容设置

使用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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

图片标签

百度编辑器编辑出来的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>
1
2
3
4
5
6
7
8
9
10

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

文本格式

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

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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/很楠不爱3/article/detail/299399