调整wang富文本编辑器层级

最新推荐文章于 2024-05-07 11:22:36 发布
最新推荐文章于 2024-05-07 11:22:36 发布
阅读量360 收藏
点赞数
分类专栏： 前端 文章标签： javascript react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/muge1161105403/article/details/122359965
版权

由于做了一个上传图片裁剪，被富文本挡住了，效果如下：
在这里插入图片描述
解决方式如下：

//添加样式即可
// wang富文本
.w-e-toolbar,
.w-e-menu,
.w-e-text-container,
.w-e-text {
  z-index: 1 !important; // 这是内容框
}
沐歌丨丶
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
富文本WangEditor层级太高覆盖顶层
Lesterbor的博客
07-28 669
今天是2021年7月28日 写网页用到了WangEditor这个编辑器，就在提交完事弹出提示框的时候，画面开始不对劲了如下图。编辑器的工具栏显示在了弹窗上部 看了一下原网页才发现了问题 编辑器的z-index整到了10000····· 后来百度百度出来的是添加以下这段css代码 .w-e-menu{ z-index: 2 !important; } .w-e-text-container{ z-index: 1 !important; } 但是我加上之后还是不好使，最后去扒了编辑器插件的js文
wangEditor 5 - 修改工具栏 toolbar 默认背景色（去掉背景颜色改为透明）
王佳斌
09-24 2583
wangEditor 5 - 修改工具栏 toolbar 默认背景色（去掉背景颜色改为透明）注意：本文章使用的是 V5 版本的 wangEditor 富文本编辑器，其他版本可借鉴。
wangEditor 富文本详解
最新发布
weixin_64684095的博客
05-07 1445
可自定义编辑器、工具栏的尺寸、边框、z-index 等样式。<template>-- 边框 -->-- 工具栏 -->-- 编译器 --></div></style>如果想要“全屏”功能，则要求工具栏、编辑器 DOM 节点必须是同一层级，同时父级盒子设置 z-index: 999。<template>-- 工具栏 -->-- 编译器 --><Editor /></div></style>如果服务端的返回体，不满足所需格式，可以使用自定义插入。// res 即服务端的返回结果。
wangeditor富文本层级显示问题
张_优秀的博客
10-08 439
.w-e-menu { z-index: 2!important; } .w-e-text-container { z-index: 1!important; } .w-e-toolbar { z-index: 2!important; }
wangeditor封装使用
weixin_42878641的博客
12-14 2722
wangeditor定制化需求的封装使用
WangEdit富文本编辑器图标修改
On the way
04-08 2354
1、如下图，图标样式 在这里直接修改i的class 是可以的 在代码里如何图标呢？ 代码里直接修改class不行 于是查找后得知他的配置里没有配置菜单图标的选项，所以通过配置的方式是行不通了 那么可以想办法给他覆盖掉，比如可以重新定义w-e-icon-text-heigh类 .w-e-icon-text-heigh:before { content: "\f1dc"; } 这个有两点需要注意，一是权重要够，二是如果不是他自身就有的字体，那你还需要引入你的字体，并声明字体 .w-e-text-he
wang富文本框编辑器
10-11
“wang富文本框编辑器”是一款适用于Web应用的开源富文本编辑器，其特点是轻量级、可自定义、易用性高。在使用npm安装时，可能会遇到缺少文件的情况，这通常是由于npm包管理器在下载过程中出现了不完整或者依赖未被...
富文本编辑器导出word
01-14
富文本编辑器是一种常见的网页和应用程序组件，它允许用户创建和编辑复杂的文本内容，包括格式化文字、插入图片、超链接等。在许多业务场景中，我们可能需要将富文本编辑器中的内容导出为Word文档，以便于分享、打印...
前端实现富文本编辑器功能
10-19
富文本编辑器是Web开发中常见的一种组件，它允许用户在网页上进行格式化文本的输入和编辑，常用于博客、论坛、评论等场景。在前端实现富文本编辑器功能时，开发者通常会借助第三方库或者插件来简化工作，其中`...
YTextEditor:canvas 富文本编辑器，支持中文
07-04
此外，为了提高用户体验，`YTextEditor`可能还实现了对常见的富文本编辑功能的支持，如字体设置、字号调整、颜色选择、列表和段落格式等。这些功能的实现通常需要维护一个内部的富文本模型，并将模型的变化实时反映...
将富文本编辑器中的网络图片下载到本地
04-29
在IT行业中，富文本编辑器（例如：CKEditor、TinyMCE等）广泛应用于网站内容创作，用户可以方便地编辑包含文本、图片、链接等多种元素的内容。然而，当用户从其他网页复制粘贴图片到富文本编辑器时，这些图片通常以...
wangEditor 编辑器
05-08
wangEditor —— 轻量级 web 富文本编辑器，配置方便，使用简单。支持 IE10+ 浏览器。
Wang Editor富文本编辑器Vue组件开发
lindaxia1026的博客
12-07 1613
vue2简单修改可使用的wangEditor组件分享
@wangeditor/editor-for-vue ^5.1.12 富文本使用记录
天黑oo
02-09 654
【代码】@wangeditor/editor-for-vue ^5.1.12 富文本使用记录。 暗色系配置、菜单配置
wangEditer 富文本编辑器 ---基于vue2.0
weixin_64761354的博客
09-09 840
wangEditer 富文本编辑器 ---基于vue2.0
Wang editor 富文本编辑器配置上传图片方法
szwwwx的博客
09-11 1294
Wang editor 富文本编辑器配置上传图片方法
轻量级富文本编辑器wangEditor源码结构介绍
weixin_30617797的博客
05-11 308
1. 引言 　　wangEditor——一款轻量级html富文本编辑器（开源软件） 网站：http://www.wangeditor.com/ demo演示：http://www.wangeditor.com/wangEditor/demo.html 下载（github）：https://github.com/wangfupeng1988/wangEditor QQ群：16...
【wangEditor富文本编辑器】富文本三种使用方法，html使用富文本，html套vue脚手架使用富文本，vue使用富文本【简单易用，复制即用】
seeeeeeeeeee的博客
10-07 3242
富文本编辑器功能是很多人都要使用的市面上有很多的编辑器可以供选择，但是很多编辑器会有点复杂，或者文档看起来难受。我最近做了一个需求，是需要在html文件上写富文本编辑器。但是我看了以前用的富文本，没找到如何在html上引入使用。就感觉不是很方便，所以后面找到了这个wangEditor富文本编辑器发现这个非常的简单，而且有html的版本文档介绍，对新手比较友好所以今天就专门写一个帖子记录一下三种使用方法。
wangEditor使用教程
qq_42264407的博客
11-10 3359
富文本编辑器超详细使用教程
vue使用wang富文本编辑器
03-30
1. 安装wang富文本编辑器 使用npm安装： ``` npm install wangEditor --save ``` 使用yarn安装： ``` yarn add wangEditor ``` 2. 在Vue组件中引入wang富文本编辑器 在需要使用富文本编辑器的组件中引入wang富文本编辑器： ```javascript import wangEditor from 'wangeditor' ``` 3. 初始化wang富文本编辑器 在组件的mounted生命周期钩子中初始化wang富文本编辑器： ```javascript mounted () { const editor = new wangEditor(this.$refs.editor) editor.create() } ``` 这里使用了ref来获取DOM元素，创建wangEditor实例并调用create()方法初始化富文本编辑器。 4. 获取富文本编辑器中的内容 在需要获取富文本编辑器中的内容时，可以使用wangEditor实例的txt或者html方法获取： ```javascript const editor = new wangEditor(this.$refs.editor) editor.create() // 获取纯文本内容 const content = editor.txt.text() // 获取HTML内容 const htmlContent = editor.txt.html() ``` 5. 设置富文本编辑器的内容 在需要设置富文本编辑器中的内容时，可以使用wangEditor实例的txt或者html方法设置内容： ```javascript const editor = new wangEditor(this.$refs.editor) editor.create() // 设置纯文本内容 editor.txt.text('这是一段纯文本内容') // 设置HTML内容 editor.txt.html('<p>这是一段HTML内容</p>') ``` 6. 完整代码 ```vue <template> <div> <div ref="editor"></div> <button @click="getContent">获取内容</button> </div> </template> <script> import wangEditor from 'wangeditor' export default { mounted () { const editor = new wangEditor(this.$refs.editor) editor.create() }, methods: { getContent () { const editor = new wangEditor(this.$refs.editor) editor.create() const content = editor.txt.text() console.log(content) } } } </script> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值