wangEditor编辑器默认是没有手机端自适应的。我们可以自己写一下自适应的样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>wangEditor自适应</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</script>
<style>
*{
margin:0;
padding: 0;
box-sizing: border-box;
}
#content{
padding: 15px;
width: 100%;
}
@media screen and (max-width: 768px){
/*富文本编辑器样式*/
.w-e-toolbar {
display: flex;
flex-direction: row;
height: auto;
flex-wrap: wrap;
}
}
</style>
</head>
<body>
<div id="content"></div>
<script src="https://unpkg.com/wangeditor/release/wangEditor.js"></script>
<script>
var E = window.wangEditor;
var editor = new E('#content');
editor.create();
</script>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>wangEditor自适应</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</script>
<style>
*{
margin:0;
padding: 0;
box-sizing: border-box;
}
#content{
padding: 15px;
width: 100%;
}
@media screen and (max-width: 768px){
/*富文本编辑器样式*/
.w-e-toolbar {
display: flex;
flex-direction: row;
height: auto;
flex-wrap: wrap;
}
}
</style>
</head>
<body>
<div id="content"></div>
<script src="https://unpkg.com/wangeditor/release/wangEditor.js"></script>
<script>
var E = window.wangEditor;
var editor = new E('#content');
editor.create();
</script>
</body>
</html>
自适应后，手机端显示效果如下：
但是还有一个问题，就是“插入代码”的弹出框太大，默认是500px,在手机端显示效果不好。我们可以改一下wangEditor.js的代码，把插入代码的弹出框改成300px
这样就基本实现了wangEditor编辑器手机端自适应了。
相关文章：
wangeditor编辑器怎么实现多图上传
wangEditor增加源码模式，添加查看源码功能
