修改wangEditor编辑器高度height

文章目录

• • • 方法1，使用js修改
    • 方法2，直接在css中修改
    • 方法3，使用官网说明的方法

方法1，使用js修改

在wangEditor编辑器中，默认的高度是300px，如需自定义高度，则需在editor.create()的后面添加代码（editor必须create之后）：

let eds = document.getElementsByClassName('w-e-text-container')
eds[0].style = eds[0].style.cssText + 'height: 自定义的高度'

完整代码如下：

editor.create()
let eds = document.getElementsByClassName('w-e-text-container')
eds[0].style = eds[0].style.cssText + 'height: 500px'

建议：

• 可给eds数组做个遍历
• 若需添加其他样式，追加在500px;后面即可

wangEditor版本号：

• @3.1.1

测试环境：

• vue @2.6.10

方法2，直接在css中修改

此方法来源：https://blog.csdn.net/qq_31384551/article/details/83240188

.w-e-text-container{
    height: 700px !important;
}

!important是重点，因为原div是行内样式设置的高度300px
经测试，此方法在本人的Vue项目中无效，非Vue项目可能有效

方法3，使用官网说明的方法

https://www.kancloud.cn/wangfupeng/wangeditor2/113966

<!--用父容器来控制宽度-->
<div style="width:90%">
    <!--用当前元素来控制高度-->
    <div id="div1" style="height:400px;max-height:500px;">
        <p>请输入内容...</p>
    </div>
</div>

<!--这里引用jquery和wangEditor.js-->
<script type="text/javascript">
    var editor = new wangEditor('div1');
    editor.create();
</script>

以上3种方法，至少有一个种可行。

最后

以上就是热情小虾米为你收集整理的修改wangEditor编辑器高度height的全部内容，希望文章能够帮你解决修改wangEditor编辑器高度height所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。