wangEditor3怎么设置富文本区域高度 vue

最新推荐文章于 2024-09-04 16:39:50 发布
最新推荐文章于 2024-09-04 16:39:50 发布
阅读量9.2k 收藏 2
点赞数
分类专栏： 前端框架 wangEditor.js 文章标签： wangEditor 高度
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_36934930/article/details/81034722
版权
本文介绍如何在vue中为wangEditor3设置富文本区域的高度。通过阅读源码和官方文档，了解到可以传入两个DOM，分别用于菜单和编辑器，实现它们的分离，从而定制高度。
摘要由CSDN通过智能技术生成

这里写图片描述
一开始没看到文档，看源码的时候，发现是可以传入两个dom的，摸索一下弄好了

function Editor(toolbarSelector, textSelector) {
   
    if (toolbarSelector == null) {
        // 没有传入任何参数，报错
        throw new Error('错误：初始化编辑器时候未传入任何参数，请查阅文档');
    }
    // id，用以区分单个页面不同的编辑器对象
    this.id = 'wangEditor-'
最低0.47元/天 解锁文章
Shuah153
关注
专栏目录
Vue3 - 超详细最新 wangEditor V5 富文本编辑器安装引入及使用教程，提供工具栏配置、基础富文本功能、API使用示例教程等（新手小白快速引入并植入到项目中）
王佳斌
09-21 2827
vue3，wangEditor v5富文本编辑器，wangEditor v5官方文档，vue3最新安装wangEditor v5富文本详细使用教程，vue3使用wangEditor v5编辑器示例代码，vue3网站网页安装植入富文本编辑器教程，vue3 wangEditor使用api，vue3安装富文本控制台出现报错如何解决，vue3 wangEditor-v5工具栏配置，vue3中使用富文本编译器wangEditor5的方法，wangeditor5在vue3中的全使用过程，vue3超详细最新wangedi
在Vue2.x中使用wangEditor3.x富文本，添加自定义按钮，并使用自己的组件上传图片。
alonesupermen的博客
05-01 2915
话不多说，先看长啥样 看完了效果，首先是wangEditor3的基本封装，html代码如下： <template> <div class="editor"> <div ref="editor" class="text"></div> <ImgBox v-show="false" ref="ImgBox" type="image" @imgList="imgList"></ImgBox>
wangEditor 自定义高度
夏已微凉、
05-20 2746
一、前言二、方法 一、前言 一般我们创建的 wangEditor 时候默认是 300px，但是我们需要修改富文本编辑框的高度 二、方法 直接 !important 修改 css 的样式 .w-e-text-container{ height: 700px !important;/*!important是重点，因为原div是行内样式设置的高度300px*/ } 我们可以在 create 之后，调用 js 来设置高度 <div id="editor">.
vue里外部控制组件wangeditor的高度
weixin_44132829的博客
05-26 480
vue里外部控制组件wangeditor的高度 组件内部 <template> <div> <div :id="id" :style="'height:'+height+'px'"></div> </div> </template> export default { components: {}, props: { content: String, id:String, hei
Vue3 使用 富文本编辑器 wangeditor/editor-for-vue 配置详解
最新发布
weixin_45563734的博客
09-04 2547
Vue3 使用 富文本编辑器 wangeditor/editor-for-vue 配置详解
wangEditor 设置高度
卡农的魔笛
01-19 1846
一般我们创建的 wangEditor 时候默认是 300px，很多网上说法是修改css，强制修改高度，例如： .w-e-text-container{ height: 700px !important;/*!important是重点，因为原div是行内样式设置的高度300px*/ } 但是这样很不好，我们可以在create之后，调用 js 来设置高度，比较灵活 $(".w-e-text-container").css("height", "700px") ...
wangeditor富文本编辑器在vue3中的使用
weixin_45803990的博客
07-13 5960
wangeditor介绍文档 wangeditor的原文博客链接 一些常见配置： 设置可编辑器内容区域的高度 instance.config.height = 350; 同步获取富文本编辑器的内容是方法onchange()，内容是instance.txt.html() onchange() { // 将值instance.txt.html() 传递至父组件 content.emit('getWangEditorValue', instance.tx
vue中使用富文本编辑器--wangeditor&修改文本区域默认高度&不展示本地图片上传按钮解决方案
初心 - 杨瑞超个人博客
10-31 2687
初心-杨瑞超个人博客诚邀您加入qq群(IT-程序猿-技术交流群): 757345416丨(IT-程序猿-技术交流2群): 936929828 在开发中，特别是后台管理，富文本是常用的，今天我们来看下vue中使用富文本编辑器–wangeditor&修改文本区域默认高度&不展示本地图片上传按钮解决方案。 之前发布过在react中的使用方法，有兴趣的可以看下：https://blog...
wangeditor相关设置文本框高度height，设置是否可编辑
随心所欲的博客
09-20 5644
参考代码 官方文档 设置是否可编辑 写法 import E from 'wangeditor' this.editor = new E(this.$refs.editor); this.editor.customConfig.onchange = (html) => { this.editorContent = html; ...
基于wangeditor封装的vue富文本编辑器
tao-cht的博客
03-26 371
<template> <div class="sm-editor-component"> <div id="sm-editor-toolbar" class="editor-toolbar"></div> <div id="sm-editor-container" class="editor-container">&...
富文本wangeditor层级太高覆盖问题(已解决)
小柠檬爱编程
04-27 4926
因为wangEditor设置的层级z-index很高，会覆盖掉和他重合的区域 会出现日期根本选不中的情况，解决办法如下：在css里加上如下样式即可，注：如果使用vue，则不要写在scoped内，否则无效 .w-e-menu { z-index: 2 !important; } .w-e-text-container { z-index: 1 !important; ...
wangeditor富文本编辑器集成配置
无极低码
04-07 6491
wangeditor富文本编辑器集成
富文本编辑器wangEditor设置初始文本框大小
zjh12312311的博客
02-19 4949
这个富文本编辑器默认的的高度是300px，放在页面里太小了，所以考虑设置一下。 在wangEditor.js下查找 $textContainerElem.css('border', '1px solid #ccc').css('border-top', 'none').css('height', '300px'); 将300px改成想要的就好了。 ...
Vue修改wangeditor编辑区高度
程序员大阳
05-13 4031
wangeditor默认高度较小，可以调整下。 首先修改样式： .w-e-text-container { height: 500px !important; /*!important是重点，因为原div是行内样式设置的高度300px*/ } 其次还需注意<style>标签不能有scope。 如此即可。 ...
【vue+wangEditor】设置输入框高度
栀妹儿的炼丹炉
09-16 1225
官网：wangEditor中介绍了高度需要用div 但是对于我vue项目丝毫没有用 于是用隔离的方式分别写上面按钮和下面输入框 template: <div style="width:100%;"> <div id="toobar" class="editorBar"></div> <div id="editor" class="editorContent"> <p>请输入内容...</p> .
Vue项目中使用wangEditor富文本输入框（推荐）
我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。
01-28 9849
创建公用组件：在src/vue/components文件夹中创建wangEditor.vue。vue中安装wangEditor。
wangEditor 初始化设置行高、字体和字体大小
weixin_42597632的博客
03-07 7926
wangEditor选择默认行高，wangEditor选择默认字体，wangEditor选择默认大小。
wangEditor出现初始化编辑器时候未传入任何参数,请查阅文档
qq_43368308的博客
02-21 1072
参考wangEditor出现初始化编辑器时候未传入任何参数,请查阅文档](https://www.cnblogs.com/lingkang/p/16698387.html)出现的原因可能是你未在初始视图、元素未创建、created、模态框、弹窗、抽屉中使用，你应该在div元素创建了再执行初始渲染，接下来在生命周期中使用就行了（函数名字我换了，你自己也可以换一下），如下。wangEditor出现初始化编辑器时候未传入任何参数,请查阅文档。希望我的也能帮助到看到的你！记得在data加上变量editor。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值