UEditor修改上传图片的弹出框适配移动端

素颜马尾好姑娘i 2022-03-09 03:12 241阅读 0赞

### 一、先改变弹窗的高度  ###

1）、找到themes/default/css/ueditor.css文件，找到/\*image-dialog\*/和/\*wordImage-dialog\*/   
2）、将其中的高度改为自己适合的高度，例如：

/*image-dialog*/ 
    .edui-default .edui-for-insertimage .edui-dialog-content { width: 250px; height: 290px; overflow: hidden;} 
    /*wordImage-dialog*/ 
    .edui-default .edui-for-wordimage .edui-dialog-content { width: 220px; height: 380px; overflow: hidden;}

### 二、到插件弹出页面中，找到对应的CSS调整相关的高度  ###

1、批量插入图片的文件在：ueditor\\dialogs\\image\\image.css下面，附件在：ueditor\\dialogs\\attachment\\image.css   
2、以批量上传图片为例，具体有修改到的代码如下（主要分本地上传、在线管理、图片搜索）：

.wrapper { height: 270px;}  
    
    .tabbody { height: 236px;}  
    
    .tabbody .panel.focus { height: 236px;}  
    
    #upload .placeholder { height: 82px; padding-top: 100px; background: url(./images/image.png) center 20px no-repeat;}  
    
    #online li .icon:hover { height: 107px;}  
    
    #online li.selected .icon:hover { height: 107px;}

### 三、修改后效果 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3htMzkzMzkyNjI1_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3htMzkzMzkyNjI1_size_16_color_FFFFFF_t_70 1][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3htMzkzMzkyNjI1_size_16_color_FFFFFF_t_70]: /images/20220309/c612f250c6864e5fa4464e565e8fd35b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3htMzkzMzkyNjI1_size_16_color_FFFFFF_t_70 1]: /images/20220309/d8a157157b8f40d3816f969c78415ab4.png

发表评论取消回复

表情：

评论列表（有 0 条评论，241人围观）

还没有评论，来说两句吧...

相关阅读

相关移动端适配

@charset "utf-8"; /* 涉及到的H5新标签，之后课程做介绍 */ html{ color:000;/*默认字体颜色黑色*...

本是古典何须时尚/ 2024年04月20日 00:24/ 0 赞/ 115 阅读

相关移动端适配

视觉稿规范2点：1 以iphone6的 375 \ 667 为基点; 　　　　　　　2 对于retina屏幕（dpr=2），为了高清，视觉稿的画布是基准的2倍：就会变成75

水深无声/ 2023年08月17日 16:20/ 0 赞/ 198 阅读

相关移动端适配

rem计算JS方式计算尺寸参照的标准尺寸 750px 换算比例为 100:1 （100px=1rem 50px=0.5rem 5px=0.05rem）

Bertha 。/ 2022年10月19日 05:39/ 0 赞/ 446 阅读

相关移动端适配

移动端适配一、移动端适配是什么？二、基本概念 1.移动端设备视口 2. 什么是rem? 三、解决方案 1. 调

客官°小女子只卖身不卖艺/ 2022年08月31日 01:46/ 0 赞/ 444 阅读

相关移动端适配

转自：/images/20220528/a9ac319170c44a5d85b86b4f83df39bf.png 大多都是介绍手淘团队的[flexible.js][

怼烎@/ 2022年05月27日 23:28/ 0 赞/ 445 阅读

相关移动端适配

1、首先在html页面中引入meta标签 <meta name="viewport" content="width=device-width, initial-sc

水深无声/ 2022年03月17日 06:14/ 0 赞/ 401 阅读

相关 UEditor适配移动端

一.全局内容设置使用getContent()接口，获取编辑器里的内容的HTML文档，用下面的格式去包裹，可以得到一个内容居中，屏幕两边留有一定边距，禁用缩放的页面

电玩女神/ 2022年03月12日 12:56/ 0 赞/ 569 阅读

相关 UEditor修改上传图片的弹出框适配移动端

一、先改变弹窗的高度 1）、找到themes/default/css/ueditor.css文件，找到/\image-dialog\/和/\wordImage-dial

素颜马尾好姑娘i/ 2022年03月09日 03:12/ 0 赞/ 242 阅读

相关移动端适配

移动端适配 1、html <meta name="viewport" content="width=device-width,initial-scale=1.0

冷不防/ 2022年01月29日 03:13/ 0 赞/ 487 阅读

相关移动端适配

在上一片文章里，关于如何使用rem进行布局，我作了一个大概的描述。今天这篇文字，主要说一个东西－dpr。我们都知道，移动端开发，运行的平台主要是 ios 和 andr

野性酷女/ 2022年01月25日 18:23/ 0 赞/ 484 阅读