laravel集成laravel-ueditor百度富文本编辑器遮挡住其他元素了

最新推荐文章于 2022-08-25 15:53:40 发布
最新推荐文章于 2022-08-25 15:53:40 发布
阅读量383 收藏
点赞数
分类专栏： laravel 文章标签： laravel html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40384362/article/details/104475294
版权
本文介绍了在laravel项目中遇到laravel-ueditor富文本编辑器遮挡页面其他元素的问题，解决方案是调整编辑器的zIndex属性。通过修改编辑器的层级值，可以避免遮挡，实现页面元素的正常显示。对于非laravel项目，也可以通过设置编辑器的层级来解决类似问题。
摘要由CSDN通过智能技术生成

在这里插入图片描述
像上面的图片显示的一样页面的其他元素被编辑器遮挡住了！

如果你也是laravel的话请到如下目录文件修改

public/vendor/ueditor/ueditor.all.js

查找关键字【zIndex】
在这里插入图片描述
【zIndex】 是层级 咱根据你的项目来修改一下值 譬如我这样
在这里插入图片描述
咱刷新一下页面看看
在这里插入图片描述
这样就解决了！
如果您不是使用laravel来做项目，或其他的页面 可以这样解决

UE.getEditor('editor', {zIndex: 100});

在实例化编辑器时候把编辑器的层级设置低一点，如果不懂该知识点那就一直改改到你满意为止！

我也不知道这样搞优雅不优雅，才学习的laravel在鼓捣中，如果你有更棒的方法请告诉我呀！

小鱼鱼豆腐
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
UEditor百度富文本编辑器--preview在线预览时头部被挡住的解决方案
weixin_34220623的博客
01-21 743
问题截图: 正常情况应该是如下显示: 解决方案: 1.打开ueditor/dialogs/preview/preview.html 2.找到body节点下面这一句   document.getElementById('preview').innerHTML = editor.getContent();   在它上面加一句 parent.document.g...
laravel 富文本编辑框overtrue/laravel-ueditor
KobeHoo的博客
01-03 1323
网站中经常用到富文本编辑框, laravel推荐使用overtrue/laravel-ueditor，overtrue/laravel-ueditor支持上传文件和图片,截图，以及七牛云存储 github地址：https://github.com/overtrue/laravel-ueditor   美化文本框：参考https://github.com/jellybool/simple-ue...
laravel-ueditor富文本编辑器
lovetina2017的博客
11-06 1187
1.composer.json里加入 "overtrue/laravel-ueditor": "~1.0", 2.然后composer update 更新 3.app.php添加 Overtrue\LaravelUEditor\UEditorServiceProvider::class, 4.运行命令：php artisan config:publish    生
点下拉框后，弹出是内容被ueditor文本框覆盖了
qilingxuanzhuan的博客
06-21 254
解决:在select外套一个div,样式设置z-index:10000(值必须大于9999)
日期控件和富文本样式覆盖问题
qinyuanyuan123的专栏
04-28 895
在创建UI的过程中，偶尔会出现控件显示冲突的问题。（比如哪一个控件的内容显示在上面） 这时我们需要关注 控件的CSS样式的z-index属性          #editPage .datepicker{                z-index: 1031!important;          }   z-index的属性值越大，优先级就越
caozha-UEditor(富文本编辑器)-PHP
06-21
caozha-UEditor是一个rich text富文本编辑器，基于百度UEditor 1.4.3.3-utf8-php版修改。 caozha-UEditor使用方法： 上传图片是否加水印： 1、打开php/config.json，将"imageWatermark"修改为true，即可开启默认添加...
vue集成百度UEditor富文本编辑器使用教程
10-17
在当前的前端开发过程中，集成富文本...通过本教程的学习，相信开发者能够掌握如何在Vue项目中集成百度UEditor富文本编辑器，并能够针对不同的项目需求灵活运用UEditor提供的各种功能，从而提升开发效率和用户体验。
caozha-UEditor(富文本编辑器)源代码
03-18
caozha-UEditor_v1.0.0.zip caozha-UEditor是一个rich text富文本编辑器，基于百度UEditor 1.4.3.3-utf8-php版修改。 caozha-UEditor使用方法： 上传图片是否加水印： 1、打开php/config.json，将
vue2.x集成百度UEditor富文本编辑器的方法
10-17
在Vue2.x项目中集成百度UEditor富文本编辑器，主要涉及以下几个步骤和知识点： 1. **下载与放置UEditor源码**： 首先，你需要从官方渠道下载UEditor的源代码，并将其放入项目的`static`文件夹中。这确保了编辑器的...
Laravel开发-laravel-ueditor
08-28
在本文中，我们将深入探讨如何在 Laravel 框架中集成和使用 Laravel-ueditor 插件，以便为你的Web应用提供一个强大的富文本编辑器功能。Laravel 是一款流行的PHP框架，它提供了优雅的语法和强大的功能，使得Web开发...
ueditor在bootstrap中弹出窗口被遮盖的解决办法
y13156556538的博客
05-09 3700
插入多选图片和其他的。被遮盖了。网上查了很多资料。发现都是ZIndex的设置。而且都不一样。只能具体问题具体分析了。查看自己的弹出模态的Zindex为10050，之后如下：多加5个就搞定了。...
TinyMce5富文本在Vue element UI的dialog中modal被遮挡的问题的两种解决办法
weixin_45770554的博客
08-25 1635
TinyMce5富文本在Vue element UI的dialog中modal被遮挡的问题的两种解决办法
富文本wangeditor层级太高覆盖问题？工具栏换行后遮挡？
qq_45668489的博客
06-30 3044
1. 富文本wangeditor层级太高覆盖问题 解决办法如下：在css里加上如下样式即可，注：如果使用vue，则不要写在scoped内，否则无效 .w-e-menu { z-index: 2 !important; } .w-e-text-container { z-index: 1 !important; } 2. 富文本wangeditor工具栏换行后遮挡 html代码结构 <template> <div id="wangeditor">
laravel使用百度富文本编辑器
qq_43789643的博客
11-27 553
我这儿用的是 ‘overtrue/laravel-ueditor’；可以在GitHub 获取百度直接可以找到 laravel 安装就好了。安装就跳过。我这儿直接使用 //引入css @include('vendor.ueditor.assets') <script id="container" name="material_details" type="text/plain" style="height: 260px" ></script> //引入简洁版 <scrip
laravel-admin集成百度富文本编辑器ueditor
t595981879的博客
09-04 865
首先要说的是laravel-admin真的是一个非常适合做管理后台的package。 官方文档有集成wangEditor、ckeditor、PHP editor的示例，如果这几个编辑器能满足你的需求可以参照官方文档操作。 ueditor是百度开源的一款编辑器，其中它的源代码模式真的是非常实用的，能让你更大限度的定制你的内容。 这里再介绍一个package laravel-u-editor...
Laravel+ueditor实现富文本编辑上传和页面显示
yi23is_a_dog的博客
06-09 4449
Ueditor是一款十分好用的富文本编辑器。和laravel结合起来使用也是更加的方便好用。废话不多说，直接上内容。1. 下载ueditor，可以参考github项目         laravel 5.5+ ：composer require overtrue/laravel-ueditor2. 建立一个软链接，软链接这部分要好好了解一下。       php artisan storage:l...
laravel 富文本编辑框overtrue/laravel-ueditor
cominglately的博客
03-31 1608
场景 网站中经常用到富文本编辑框, laravel推荐使用overtrue/laravel-ueditor 解析 overtrue/laravel-ueditor支持上传文件和图片,截图，以及七牛云存储 美化文本框 `参考https://github.com/jellybool/simple-ueditor` 配置 `参考 http://fex.baidu.com/...
laravel-admin ueditor 集成并解决刷新问题
jiaHey的博客
10-10 2607
laravel-admin 是一个快速开发管理后台的框架，这里不做详细介绍 UEditor.php代码如下 <?php namespace App\Extensions; use Encore\Admin\Form\Field; class UEditor extends Field { protected static $css = [ ]; public sta
Laravel-admin加载富文本编辑器ueditor扩展
墙外楼
08-06 1004
编辑器记录欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdow...
laravel10安装laravel-ueditor
最新发布
02-24
很抱歉，目前Laravel的最新版本是Laravel 8，并没有Laravel 10。不过，我可以为您介绍如何在Laravel 8中安装laravel-ueditor扩展。 laravel-ueditor是一个用于在Laravel项目中集成百度UEditor富文本编辑器的扩展。下面是安装laravel-ueditor的步骤： 1. 首先，在您的Laravel项目中打开终端，并使用Composer安装laravel-ueditor扩展包。运行以下命令： ``` composer require overtrue/laravel-ueditor ``` 2. 安装完成后，打开项目根目录下的`config/app.php`文件，找到`providers`数组，并添加以下代码： ```php Overtrue\LaravelUEditor\UEditorServiceProvider::class, ``` 3. 接下来，仍然在`config/app.php`文件中，找到`aliases`数组，并添加以下代码： ```php 'UEditor' => Overtrue\LaravelUEditor\Facades\UEditor::class, ``` 4. 运行以下命令，发布配置文件和资源文件： ``` php artisan vendor:publish --provider="Overtrue\LaravelUEditor\UEditorServiceProvider" ``` 5. 运行以下命令，生成UEditor所需的数据库表： ``` php artisan migrate ``` 6. 在需要使用UEditor的视图文件中，引入UEditor的CSS和JS文件。例如，在`resources/views/welcome.blade.php`文件中添加以下代码： ```html <link rel="stylesheet" href="{{ asset('vendor/ueditor/themes/default/css/ueditor.css') }}"> <script src="{{ asset('vendor/ueditor/ueditor.config.js') }}"></script> <script src="{{ asset('vendor/ueditor/ueditor.all.js') }}"></script> ``` 7. 在需要使用UEditor的表单中，添加UEditor的编辑器实例。例如，在表单中添加一个名为`content`的文本域，并使用UEditor渲染该文本域： ```html <script> var ue = UE.getEditor('content'); </script> ``` 现在，您已经成功安装并集成了laravel-ueditor扩展。您可以在Laravel项目中使用UEditor富文本编辑器了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值