【请教】修改ueditor弹出框的宽度

hgwyl 2020-10-05 03:15:38
实在找不到地方在哪可以问ueditor的问题，想了一下，应该是这个版块最贴近了。

目前使用情况
1、utf-8，php版本。
2、基本能正常使用。

需要解决的问题
多图片上传、表情、涂鸦、视频、音乐、附件、百度地图等这些类似按钮
点击后能正常弹出框进行操作
——但是弹出框太宽了，手机上显示不完全
——网上到处蹿了3天，自己也尝试修改，没有成功
——是“弹出框”，不是ueditor框体，也不是“文本编辑框”

请问哪位修改过吗？或者有什么参考吗？或者给点思路提示都行。
（百度的请不要贴了，没用）
...全文
12405 3 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
3 条回复
切换为时间正序
请发表友善的回复…
发表回复
hgwyl 2020-10-07
  • 打赏
  • 举报
 回复
自己慢慢啃了一圈代码，把需要修改的都改好了。 打个备注给后面的兄弟看吧。 （已经尽量把注释给写清楚了；不清楚的也别问我，代码太多，记不住，自己试试就好） 

//设置多图上传弹出框（外框）宽度
//路径：themes/default/css/ueditor.css
//第3行
/*image-dialog*/
.edui-default .edui-for-insertimage .edui-dialog-content {
    width: 350px;
    /*width: 650px;*/
    height: 400px;
    overflow: hidden;
}
//设置多图上传弹出框（内框）宽度
//路径：dialogs/image/image.css
//第1361行
.wrapper {
    zoom: 1;
    width: 99%;
    *width: 626px;
    height: 380px;
    margin: 0 auto;
    /*padding: 10px;*/
    position: relative;
    font-family: sans-serif;
}
//关闭多图上传弹出框中多余选项卡
//路径：dialogs/image/image.html
//第21行
        <div id="tabhead" class="tabhead">
            <!---<span class="tab" data-content-id="remote"><var id="lang_tab_remote"></var></span>--->
            <span class="tab focus" data-content-id="upload"><var id="lang_tab_upload"></var></span>
            <span class="tab" data-content-id="online"><var id="lang_tab_online"></var></span>
            <!---<span class="tab" data-content-id="search"><var id="lang_tab_search"></var></span>--->
        </div>
//修改图片上传路径及回显路径
//路径：php/config.json
//第3行
    /* 上传图片配置项 */
    "imageActionName": "uploadimage", /* 执行上传图片的action名称 */
    "imageFieldName": "upfile", /* 提交的图片表单名称 */
    "imageMaxSize": 2048000, /* 上传大小限制，单位B */
    "imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 上传图片格式显示 */
    "imageCompressEnable": true, /* 是否压缩图片,默认是true */
    "imageCompressBorder": 1600, /* 图片压缩最长边限制 */
    "imageInsertAlign": "none", /* 插入的图片浮动方式 */
    "imageUrlPrefix": "http://www.12345.com", /* 图片访问路径前缀 */
    /*"imageUrlPrefix": "",*/ /* 图片访问路径前缀 */
    "imagePathFormat": "/control/ueditor/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */
    /*"imagePathFormat": "/ueditor/php/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}",*/ /* 上传保存路径,可以自定义保存路径和文件名格式 */
//第77行
    /* 列出指定目录下的图片 */
    "imageManagerActionName": "listimage", /* 执行图片管理的action名称 */
    "imageManagerListPath": "/control/ueditor/upload/image/", /* 指定要列出图片的目录 */
    /*"imageManagerListPath": "/ueditor/php/upload/image/",*/ /* 指定要列出图片的目录 */
    "imageManagerListSize": 20, /* 每次列出文件数量 */
    "imageManagerUrlPrefix": "http://www.12345.com", /* 图片访问路径前缀 */
    /*"imageManagerUrlPrefix": "",*/ /* 图片访问路径前缀 */
    "imageManagerInsertAlign": "none", /* 插入的图片浮动方式 */
    "imageManagerAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 列出的文件类型 */





//处理上传图片超出编辑区
//路径：themes/iframe.css
//第2行(增加)
img {
 max-width: 90%; /*图片自适应宽度*/
}
body {
 overflow-y: scroll !important;
}
.view {
 word-break: break-all;
}
.vote_area {
 display: block;
}
.vote_iframe {
 background-color: transparent;
 border: 0 none;
 height: 100%;
}
/*去除点击图片后出现的拉伸边框*/
#edui1_imagescale{display:none !important;}




//设置附件上传弹出框（外框）宽度
//路径：themes/default/css/ueditor.css
//第1390行
/*attachment-dialog*/
.edui-default .edui-for-attachment .edui-dialog-content {
    width: 350px;
    /*width: 650px;*/
    height: 400px;
    overflow: hidden;
}
//设置附件上传弹出框（内框）宽度
//路径：dialogs/attachment/attachment.css
//第3行
.wrapper {
    zoom: 1;
    width: 99%;
    *width: 626px;
    height: 380px;
    margin: 0 auto;
    /*padding: 10px;*/
    position: relative;
    font-family: sans-serif;
}
//修改附件上传路径及回显路径
//路径：php/config.json
//第61行
    /* 上传文件配置 */
    "fileActionName": "uploadfile", /* controller里,执行上传视频的action名称 */
    "fileFieldName": "upfile", /* 提交的文件表单名称 */
    "filePathFormat": "/control/ueditor/upload/file/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */
    /*"filePathFormat": "/ueditor/php/upload/file/{yyyy}{mm}{dd}/{time}{rand:6}",*/ /* 上传保存路径,可以自定义保存路径和文件名格式 */
    "fileUrlPrefix": "http://www.12345.com", /* 文件访问路径前缀 */
    /*"fileUrlPrefix": "",*/ /* 文件访问路径前缀 */
    "fileMaxSize": 51200000, /* 上传大小限制，单位B，默认50MB */
    "fileAllowFiles": [
        ".png", ".jpg", ".jpeg", ".gif", ".bmp",
        ".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",
        ".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid",
        ".rar", ".zip", ".tar", ".gz", ".7z", ".bz2", ".cab", ".iso",
        ".doc", ".docx", ".xls", ".xlsx", ".ppt", ".pptx", ".pdf", ".txt", ".md", ".xml"
    ], /* 上传文件格式显示 */
//第87行
    /* 列出指定目录下的文件 */
    "fileManagerActionName": "listfile", /* 执行文件管理的action名称 */
    "fileManagerListPath": "/control/ueditor/upload/file/", /* 指定要列出文件的目录 */
    /*"fileManagerListPath": "/ueditor/php/upload/file/",*/ /* 指定要列出文件的目录 */
    "fileManagerUrlPrefix": "http://www.12345.com", /* 文件访问路径前缀 */
    /*"fileManagerUrlPrefix": "",*/ /* 文件访问路径前缀 */
    "fileManagerListSize": 20, /* 每次列出文件数量 */
    "fileManagerAllowFiles": [
        ".png", ".jpg", ".jpeg", ".gif", ".bmp",
        ".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",
        ".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid",
        ".rar", ".zip", ".tar", ".gz", ".7z", ".bz2", ".cab", ".iso",
        ".doc", ".docx", ".xls", ".xlsx", ".ppt", ".pptx", ".pdf", ".txt", ".md", ".xml"
    ] /* 列出的文件类型 */




//设置特殊字符弹出框（外框）宽度、高度
//路径：themes/default/css/ueditor.css
//第1353行
/*spechars-dialog*/
.edui-default .edui-for-spechars .edui-dialog-content {
    width: 350px;
    /*width: 620px;*/
    height: 560px;
    /*height: 500px;*/
    *width: 630px;
    *height: 570px;
}
//设置特殊字符弹出框（内框）宽度、高度
//路径：dialogs/spechars/spechars.html
//第8行
    <style type="text/css">
        html,body{overflow:hidden;}
        #specharsTab{width: 97%;margin: 10px auto; zoom:0.8;position: relative}
        .tabbody {height:600px;}
        .tabbody span{ margin: 5px 3px;text-align: center;display:inline-block;width: 40px;height:16px;line-height: 16px;cursor: pointer; }
    </style>







//设置地图弹出框（外框）宽度
//路径：themes/default/css/ueditor.css
//第1401行
/*map-dialog*/
.edui-default .edui-for-map .edui-dialog-content {
    width: 350px;
    /*width: 550px;*/
    height: 370px;
}
//设置地图弹出框（内框）
//路径：dialogs/map/map.html
//第9行
        .content{width:90%; height: 350px;margin: 10px auto;}
//第90行，修改定位点
        }else{
            point = new BMap.Point(109.41436,24.303655);    // 创建点坐标
            marker = new BMap.Marker(point);
            map.addControl(new BMap.NavigationControl());
            map.centerAndZoom(point, 15);                     // 初始化地图,设置中心点坐标和地图级别。
        }
hgwyl 2020-10-06
  • 打赏
  • 举报
 回复
上传附件（上传文件）的找到了。 应该是测试时没有清空缓存文件导致“以为不起作用” 修改ueditor/dialogs/attachment/attachment.css 第3行开始，多余的注释就可以了 
.wrapper {
    zoom: 0.95;
    width: 360px;
    /**width: 626px;*/
    /*height: 380px;*/
    /*margin: 0 auto;*/
    /*padding: 10px;*/
    position: relative;
    font-family: sans-serif;
}
 来人接分
hgwyl 2020-10-05
  • 打赏
  • 举报
 回复
现在测试出来的 多图片批量上传的弹出窗口：ueditor/dialogs/image/image.css （第3行开始） 
.wrapper {
    zoom: 1;
    width: 630px;
    *width: 626px;
    height: 380px;
    margin: 0 auto;
    padding: 10px;
    position: relative;
    font-family: sans-serif;
}
只保留width:630px;这行，并将630px修改到自己想要的宽度。 其他的全部注释掉。 就能控制多图片批量上传的弹出窗口宽度。 但奇怪的是，“上传文件”的弹出窗口，修改ueditor/dialogs/attachment/attachment.css 修改第3行开始的.wrapper却没用。 求助
ueditor1_4_3_3-utf8-jsp.zip
ueditor富文本框的必要资源ueditor富文本框的必要资源ueditor富文本框的必要资源ueditor富文本框的必要资源ueditor富文本框的必要资源ueditor富文本框的必要资源ueditor富文本框的必要资源ueditor富文本框的必要资源ueditor富文本框的必要资源ueditor富文本框的必要资源ueditor富文本框的必要资源ueditor富文本框的必要资源
ueditor修改版
ueditor1.4.3版本中，上传文件和图片 都只能在项目的根目录，我修改了源码，可以随意上传至服务器中，只要修改ueditor 1.4.3工具中的 jsp/control.jsp文件的saveRootPath值
UEditor 百度富文本编辑器 .Net实例 已解决上传图片问题
1、UEditor 百度富文本编辑器完整版 .Net实例 已解决上传图片问题。 2、内附完整demo实例，附带txt讲解说明及UEditor常见问题解决方案。 3、已经调试好的百度文本编辑器实例，用户体验不错，具备很多人性化的功能，特推荐给大家！
百度编辑器UEditor ASP.NET示例Demo
百度编辑器UEditor ASP.NET示例Demo http://blog.csdn.net/a497785609/article/details/42640041
ueditor1.3.6上传图片配置
ueditor1.3.6上传图片配置，亲自测试通过，假如您觉得好的话，给个五分哦
CSS

61,129

社区成员

60,711

社区内容

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章