laravel-admin联动选择展示时ueditor样式错乱

问题

录入内容时,根据资源类型,展示不同的需要录入的内容,很常见的功能,但是在切换时,编辑器一直出不来,如图:
在这里插入图片描述

代码如下:

  $form->radio('type', '资源类型')->when(2, function (Form $form) {$form->ueditor('content', '文章内容');})->when(1, function (Form $form) use (&$class) {$form->ueditor('xianbingshi', '病例现病史');$form->ueditor('jiazushi', '病例家族史');})->options([1,2])->default(2);

解决方法

感觉写法没问题,那我就开始看控制台,看样式,为啥没出来,发现了这个:
在这里插入图片描述
找到了原因,就好解决了,我本来是打算直接用js来改变宽度的,如下:

 $js = <<<JSwindow.onload=function() {console.log($('.cascade-field_type-_normal_-1-0 .form-group .col-md-8').children());$('.cascade-field_type-_normal_-1-0 #edui282').width('769px');// $('.cascade-field_type-_normal_-1-0 #edui282').addClass('zhang');$('.cascade-field_type-_normal_-1-0 #edui282 #edui282_iframeholder').width('769px');
}
JS;Admin::script($js);

但是一直没生效,后来发现,是找不到id为edui282的元素,因为是script类型的;后来发现能找到类**.edui-default .edui-editor**,干脆直接在ueditor.css中改了样式;

.edui-default .edui-editor {border: 1px solid #d4d4d4;background-color: white;position: relative;overflow: visible;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;width: auto!important;//这个是加的
}.edui-default .edui-editor-iframeholder {position: relative;width: auto !important;//这个是加的/*for fix ie6 toolbarmsg under iframe bug. relative -> static *//*_position: static !important;*
}

然后让其css生效就可以了

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/108600.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ChatGPT新增超强插件:文本直接生成视频、海报,支持自定义修改!

全球著名在线设计平台Canva&#xff0c;在ChatGPT Plus&#xff08;GPT-4&#xff09;上推出了插件功能&#xff0c;用户通过文本提示&#xff0c;几秒钟就能生成演示文稿、PPT插图、电子书封面、宴会邀请函等各种精美设计海报&#xff0c;同时支持生成视频。 该插件最强大的功…

浅谈Http协议、TCP协议(转载)

TCP标志位,有6种标示&#xff1a;SYN(synchronous建立联机) &#xff0c;ACK(acknowledgement 确认) &#xff0c;PSH(push传送)&#xff0c;FIN(finish结束) &#xff0c;RST(reset重置)&#xff0c; URG(urgent紧急) Sequence number(顺序号码) &#xff0c;Acknowledge num…

uni-app:单页面的页面切换

效果 代码 <template><view><view class"tab-bar"><text class"tab" :class"{ active: activeTab 0 }" click"changeTab(0)">页面1</text><text class"tab" :class"{ active: acti…

盘点中国光博会CIOE2023上的国货

一、中国光博会历史地位 CIOE中国光博会首次举办于1999年&#xff0c;经历24年在行业的深耕及拓展&#xff0c;是全球极具规模及影响力的综合型展会&#xff0c;见证了中国光电行业的变化及蓬勃发展。无论是超高清视频领域还是AI应用领域&#xff0c;均属于近年来的热门赛道&a…

快速搭建超轻量级图床——Cpolar+和树洞外链

文章目录 1.前言2. 树洞外链网站搭建2.1. 树洞外链下载和安装2.2 树洞外链网页测试2.3 cpolar的安装和注册 3.本地网页发布3.1 Cpolar临时数据隧道3.2 Cpolar稳定隧道&#xff08;云端设置&#xff09;3.3 Cpolar稳定隧道&#xff08;本地设置&#xff09; 4.公网访问测试5.结语…

《动手学深度学习 Pytorch版》 4.10 实战Kaggle比赛:预测比赛

4.10.1 下载和缓存数据集 import hashlib import os import tarfile import zipfile import requests#save DATA_HUB dict() DATA_URL http://d2l-data.s3-accelerate.amazonaws.com/def download(name, cache_diros.path.join(.., data)): #save"""下载一个…

Layui + Flask | 实现注册、登录功能(案例篇)(08)

此案例内容比较多,建议滑到最后点击阅读原文,阅读体验更佳。后续也会录制案例视频,将在本周内上传到同名的 b 站账号。 已经看了 layui 表单相关的知识,接下来就可以实现注册功能,功能逻辑如下: 项目创建 新建 flask 项目下载 layui 文件,解压之后复制到指定文件编写前…

SpringBoot集成Apache RocketMQ详解

文章目录 0. 前言1. Spring Boot 集成Apache RocketMQ详细步骤1.1.添加依赖1.2.配置RocketMQ1.3.创建消息生产者&#xff08;Producer&#xff09;1.4.创建消息消费者&#xff08;Consumer&#xff09; 2. 测试验证3. 常见报错4. 参考文档5. 源码地址 0. 前言 上个章节我们学习…

uniapp 轮播列表左右滑动,滑动到中间放大

html <!-- 轮播 --><view class"heade"><swiper class"swiper" display-multiple-items3 circulartrue previous-margin1rpxnext-margin1rpx current0 change"swiperChange" ><block v-for"(item,index) in list"…

计算机竞赛 机器视觉opencv答题卡识别系统

0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; 答题卡识别系统 - opencv python 图像识别 该项目较为新颖&#xff0c;适合作为竞赛课题方向&#xff0c;学长非常推荐&#xff01; &#x1f947;学长这里给一个题目综合评分(每项满分5分…

【List篇】ArrayList 的线程不安全介绍

ArrayList 为什么线程不安全&#xff1f; 主要原因是ArrayList是非同步的,没有同步机制,并且其底层实现是基于数组&#xff0c;而数组的长度是固定的。当对 ArrayList 进行增删操作时&#xff0c;需要改变数组的长度&#xff0c;这就会导致多个线程可能同时操作同一个数组&…

离散制造企业如何打造MES管理系统

在当今制造业中&#xff0c;MES生产管理系统越来越受到关注&#xff0c;但在实际应用中也遇到了一些问题。本文分析了离散制造业和流程生产行业的MES应用现状&#xff0c;指出了这两个行业在部署MES管理系统时存在差异的原因&#xff0c;并探讨了如何在离散制造业提升生产效率&…