修改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编辑器使用
. wangEditor 编辑器的使用通过 https://github.com/wangfupeng1988/wangEditor/releases 下载wangEditor文档引入到项目中. ...
wangEditor编辑器中解析html图文信息问题（三）
以上两篇,我们主要记录了wangEditor编辑器的基础使用方法,以及上传图片部分.如果对前两篇有兴趣的,可以参考链接: http://blog.csdn.net/LJFPHP/article/det ...
dedephp geteditor(,cms教程：dedecms修改后台编辑器参数GetEditor的方法
dedecms修改后台编辑器参数GetEditor dedecms通过include/helpers/util.helper.php function GetEditor($fname, $fvalu ...
SPAW Editor .NET Edition v.2乱用：使用代码调整编辑器高度
SPAW Editor .NET Edition v.2乱用中介绍了一个HTML Editor,在使用这个Editor进行页面布局的时候可能希望使用代码控制编辑器的大小,例如在用户调整浏览器大小的时候 ...
android更换导航背景,修改TabHost导航高度和背景颜色，tabhost背景颜色,主要是android使用...
修改TabHost导航高度和背景颜色,tabhost背景颜色,主要是android使用主要是android使用TabHost布局时.设置tabhost的导航条高度,及背景颜色private TabW ...
Java 开发笔记 - wangEditor 编辑器图片上传
Java 开发笔记 - wangEditor 编辑器图片上传前言转型 java 开发后入手的第一个项目,写写博客记录一下该项目使用的是 sping boot + mybatis plus + t ...
Vue: wangEditor 编辑器使用示例
开源 Web 富文本编辑器,开箱即用,配置简单文档 https://doc.wangeditor.com/ wangEditor 5 https://www.wangeditor.com/ wang ...
怎么修改CAD编辑器中默认的线型
很多了解CAD的小伙伴们都应该知道,一开始绘制CAD图纸的时候使用的都是编辑器中默认的线型,如果为了图纸的需要,要将默认的线型进行修改的话要怎么办呢?怎么修改CAD编辑器中默认的线型呢?具体要怎么来进 ...
wangEditor编辑器在laravel中上传图片（二）
这里接着上篇,上篇是关于wangEditor的简单实用.这篇主要是上传图片. 一.wangEditor上传图片的一些配置博主这里使用的是laravel5.1框架,大家根据自己的框架调整就好. 1.上 ...

修改wangEditor编辑器高度height

文章目录

方法1，使用js修改

方法2，直接在css中修改

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

修改wangEditor编辑器高度height相关推荐

最新文章

热门文章