Layui中引入ueeditor二次渲染不显示问题的处理

Layui中引入ueeditor二次渲染不显示问题的处理

一、定义

initUEditor()方法

var ue,viewPath;

function initUEditor(){

var token=layui.data(layui.setter.tableName)['token'];

if(ue)

{

UE.delEditor("ncontent");

}//这里如果已经初始化，需要先将其清除之后，再次渲染才有效

ue = UE.getEditor('ncontent', {

"autoHeight": true,

"serverUrl": "/api/upload/ueupload?token="+token,

"imagePathFormat": "upload/{yyyy}{mm}/{rand:6}_{filename}",

"imageActionName": "uploadimage", /* 执行上传图片的action名称 */

"imageFieldName": "upfile", /* 提交的图片表单名称 */

"imageMaxSize": 2048000, /* 上传大小限制，单位B */

"imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 上传图片格式显示 */

"imageCompressEnable": true, /* 是否压缩图片,默认是true */

"imageCompressBorder": 1600, /* 图片压缩最长边限制 */

"imageInsertAlign": "none", /* 插入的图片浮动方式 */

"imageUrlPrefix": viewPath, /* 图片访问路径前缀 */

"imageSaveAbsolutePath": "", /* 文件保存路径 */

"imageFtpUpload": false, /*是否FTP OSS上传*/

/* {filename} 会替换成原文件名,配置这项需要注意中文乱码问题 */

/* {rand:6} 会替换成随机数,后面的数字是随机数的位数 */

/* {time} 会替换成时间戳 */

/* {yyyy} 会替换成四位年份 */

/* {yy} 会替换成两位年份 */

/* {mm} 会替换成两位月份 */

/* {dd} 会替换成两位日期 */

/* {hh} 会替换成两位小时 */

/* {ii} 会替换成两位分钟 */

/* {ss} 会替换成两位秒 */

/* 非法字符 \ : * ? " < > | */

/* 具请体看线上文档: fex.baidu.com/#use-format_upload_filename */

/* 涂鸦图片上传配置项 */

"scrawlActionName": "uploadscrawl", /* 执行上传涂鸦的action名称 */

"scrawlFieldName": "upfile", /* 提交的图片表单名称 */

"scrawlPathFormat": "upload/{yyyy}{mm}/{rand:6}_{filename}", /* 上传保存路径,可以自定义保存路径和文件名格式 */

"scrawlMaxSize": 2048000, /* 上传大小限制，单位B */

"scrawlUrlPrefix": viewPath, /* 图片访问路径前缀 */

"scrawlSaveAbsolutePath": "", /* 文件保存路径 */

"scrawlFtpUpload": false, /*是否FTP OSS上传*/

"scrawlInsertAlign": "none",

/* 截图工具上传 */

"snapscreenActionName": "uploadimage", /* 执行上传截图的action名称 */

"snapscreenPathFormat": "upload/{yyyy}{mm}/{rand:6}_{filename}", /* 上传保存路径,可以自定义保存路径和文件名格式 */

"snapscreenUrlPrefix": viewPath, /* 图片访问路径前缀 */

"snapscreenSaveAbsolutePath": "", /* 文件保存路径 */

"snapscreenFtpUpload": false, /*是否FTP 上传*/

"snapscreenInsertAlign": "none", /* 插入的图片浮动方式 */

/* 抓取远程图片配置 */

"catcherLocalDomain": ["127.0.0.1", "localhost", "img.baidu.com"],

"catcherActionName": "catchimage", /* 执行抓取远程图片的action名称 */

"catcherFieldName": "source", /* 提交的图片列表表单名称 */

"catcherPathFormat": "upload/{yyyy}{mm}/{rand:6}_{filename}", /* 上传保存路径,可以自定义保存路径和文件名格式 */

"catcherUrlPrefix": viewPath, /* 图片访问路径前缀 */

"catcherSaveAbsolutePath": "", /* 文件保存路径 */

"catcherFtpUpload": false, /*是否FTP 上传*/

"catcherMaxSize": 2048000, /* 上传大小限制，单位B */

"catcherAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 抓取图片格式显示 */

/* 上传视频配置 */

"videoActionName": "uploadvideo", /* 执行上传视频的action名称 */

"videoFieldName": "upfile", /* 提交的视频表单名称 */

"videoPathFormat": "upload/{yyyy}{mm}/{rand:6}_{filename}", /* 上传保存路径,可以自定义保存路径和文件名格式 */

"videoUrlPrefix": viewPath, /* 视频访问路径前缀 */

"videoSaveAbsolutePath": "", /* 文件保存路径 */

"videoFtpUpload": false, /*是否FTP OSS上传*/

"videoMaxSize": 102400000, /* 上传大小限制，单位B，默认100MB */

"videoAllowFiles": [

".flv",

".swf",

".mkv",

".avi",

".rm",

".rmvb",

".mpeg",

".mpg",

".ogg",

".ogv",

".mov",

".wmv",

".mp4",

".webm",

".mp3",

".wav",

".mid"

], /* 上传视频格式显示 */

/* 上传文件配置 */

"fileActionName": "uploadfile", /* controller里,执行上传视频的action名称 */

"fileFieldName": "upfile", /* 提交的文件表单名称 */

"filePathFormat": "upload/{yyyy}{mm}/{rand:6}_{filename}", /* 上传保存路径,可以自定义保存路径和文件名格式 */

"fileUrlPrefix": viewPath, /* 文件访问路径前缀 */

"fileSaveAbsolutePath": "", /* 文件保存路径 */

"fileFtpUpload": false, /*是否FTP OSS上传*/

"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"

], /* 上传文件格式显示 */

/* 列出指定目录下的图片 */

"imageManagerActionName": "listimage", /* 执行图片管理的action名称 */

"imageManagerListPath": "upload", /* 指定要列出图片的目录 */

"imageManagerListSize": 20, /* 每次列出文件数量 */

"imageManagerUrlPrefix": viewPath, /* 图片访问路径前缀 */

"imageManagerSaveAbsolutePath": "", /* 文件保存路径 */

"imageManagerFtpUpload": false, /*是否FTP OSS上传*/

"imageManagerInsertAlign": "none", /* 插入的图片浮动方式 */

"imageManagerAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 列出的文件类型 */

/* 列出指定目录下的文件 */

"fileManagerActionName": "listfile", /* 执行文件管理的action名称 */

"fileManagerListPath": "upload/202107/", /* 指定要列出文件的目录 */

"fileManagerUrlPrefix": viewPath, /* 文件访问路径前缀 */

"fileManagerSaveAbsolutePath": "", /* 文件保存路径 */

"fileManagerFtpUpload": false, /*是否FTP OSS上传*/

"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"

] /* 列出的文件类型 */

});

//对编辑器的操作最好在编辑器ready之后再做

ue.ready(function () {

ue.setHeight(350);

});

}

二、在加载视图页中再次调用

view(this.id).render('article/ueform').done(function(){

form.render(null, 'layuiadmin-form-admin');

form.val("adminForm", {artid:0});

initUEditor();

});