全国服务热线:4008-888-888

行业新闻

微信小程序订制_webuploader模态框ueditor显示问题解

webuploader模态框ueditor显示问题解决方法       这篇文章主要为大家详细介绍了webuploader模态框ueditor显示问题的解决,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

ueditor 插件中,默认的z-index值为900 ;

在模态框中使用ueditor,可能会出现不兼容的情况,在ueditor.config.js里面修改z-index值,要比父级结构要大,否则,字体相关的下拉框还是会显示异常,也可以覆盖原来的z-index对应的样式,

.edui-default{
 z-index: 30111 !important;

webupload 百度的上传插件,如果在模态框中使用,会出现点击无反应的情况,搜索得之,解决方式是在模态框显示时调用shown.bs.modal 方法去初始化webuploader实例, 但结局就是每次显示模态框都会导致选择文件的按钮越来越大。

以下是方式:

var $list=$("#thelist"); //这几个初始化全局的百度文档上没说明,好蛋疼。
 var $btn =$("#ctlBtn"); //开始上传
 var thumbnailWidth = 100; //缩略图高度和宽度 (单位是像素),当宽高度是0~1的时候,是按照百分比计算,具体可以看api文档
 var thumbnailHeight = 100;
 $("#upload_pic").modal('show');
 $("#upload_pic").on("shown.bs.modal",function(){
 uploader = WebUploader.create({
 // 选完文件后,是否自动上传。
 auto: false,
 // swf文件路径
 swf: base+'/statics/js/webUploader/Uploader.swf',
 // 文件接收服务端。
 server: base + '/upload/uploadImg',
 // 选择文件的按钮。可选。
 // 内部根据当前运行是创建,可能是input元素,也可能是flash.
 pick: '#filePicker',
 // 只允许选择图片文件。
 accept: {
 title: 'Images',
 extensions: 'gif,jpg,jpeg,bmp,png',
 mimeTypes: 'image/*'
 method:'POST',
 // 当有文件添加进来的时候
 uploader.on( 'fileQueued', function( file ) { // webuploader事件.当选择文件后,文件被加载到文件队列中,触发该事件。等效于 uploader.onFileueued = function(file){...} ,类似js的事件定义。
 var $li = $(
 ' div id="' + file.id + '" ' +
 ' img ' +
 ' div ' + file.name + ' /div ' +
 ' /div '
 $img = $li.find('img');
 // $list为容器jQuery实例
 $list.append( $li );
 // 创建缩略图
 // 如果为非图片文件,可以不用调用此方法。
 // thumbnailWidth x thumbnailHeight 为 100 x 100
 uploader.makeThumb( file, function( error, src ) { //webuploader方法
 if ( error ) {
 $img.replaceWith(' span 不能预览 /span 
 return;
 $img.attr( 'src', src );
 }, thumbnailWidth, thumbnailHeight );
 // 文件上传过程中创建进度条实时显示。
 uploader.on( 'uploadProgress', function( file, percentage ) {
 var $li = $( '#'+file.id ),
 $percent = $li.find('.progress span');
 // 避免重复创建
 if ( !$percent.length ) {
 $percent = $(' p span /span /p ')
 .appendTo( $li )
 .find('span');
 $percent.css( 'width', percentage * 100 + '%' );
 // 文件上传成功,给item添加成功class, 用样式标记上传成功。
 uploader.on( 'ess', function( file ) {
 $( '#'+file.id ).addClass('upload-state-done');
 // 文件上传失败,显示上传出错。
 uploader.on( 'uploadError', function( file ) {
 var $li = $( '#'+file.id ),
 $error = $li.find('div.error');
 // 避免重复创建
 if ( !$error.length ) {
 $error = $(' div /div ').appendTo( $li );
 $error.text('上传失败');
 // 完成上传完了,成功或者失败,先删除进度条。
 uploader.on( 'uploadComplete', function( file ) {
 $( '#'+file.id ).find('.progress').remove();
 $btn.on( 'click', function() {
 uploader.upload();

解决每次点击显示modal导致上传按钮变大的方式为覆盖由webuploader 生成的上传按钮样式

.webuploader-pick{
 padding: 0 !important;
 width: 82px !important;
 height: 38px !important;
 line-height: 38px !important;

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。




在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服