Ueditor1.4.3 configuration process (including the use of separately uploaded files and images), ueditor1.4.3 upload Configuration

Ueditor1.4.3 configuration process (including the use of separately uploaded files and images), ueditor1.4.3 upload Configuration

Here we use the UTF-8 version of the jsp version of ueditor1.4.3.

Download the corresponding ueditor and copy the ueditor folder to the project. The file structure is as follows:

Then, import the jar package used by the project to the lib directory. Before importing the package, modify the bug in the ueditor jar package. Click here to open the link.

Configure the config. json file in the jsp directory to adapt to our project. The configuration content is as follows:

/* Configurations related to frontend and backend communication. Only the multiline mode is allowed for comments */
{
/* Upload image configuration items */
"ImageActionName": "uploadimage",/* Name of the action for uploading images */
"ImageFieldName": "upfile",/* Name of the submitted image form */
"ImageMaxSize": 51200000,/* upload size limit, unit: B */
"ImageAllowFiles ":[". png ",". jpg ",". jpeg ",". gif ",". bmp ",". swf "],/* display uploaded images in the format */
"ImageCompressEnable": true,/* Whether to compress the image. The default value is true */
"ImageCompressBorder": 1600,/* maximum side limit for Image Compression */
"ImageInsertAlign": "none",/* floating mode of the inserted image */
"ImageUrlPrefix": "http: // localhost: 8080/soulpower",/* prefix of the image access path */
"ImagePathFormat": "/ueditor/jsp/upload/image/{yyyy} {mm} {dd}/{time} {rand: 6}",/* upload and save path, you can customize the storage path and file name format */
/* {Filename} is replaced with the original file name. Chinese garbled characters are required for configuration */
/* {Rand: 6} is replaced with a random number, followed by the number of digits of the random number */
/* {Time} is replaced with the timestamp */
/* {Yyyy} is replaced with a four-digit year */
/* {Yy} is replaced with two years */
/* {Mm} is replaced with two months */
/* {Dd} is replaced with two dates */
/* {Hh} will be replaced with two hours */
/* {Ii} is replaced with two minutes */
/* {Ss} is replaced with two seconds */
/* Invalid character \:*? "<> | */
/* For more information, see the online documentation fex.baidu.com/ueditor/#use-format_upload_filename */


/* Configuration items for uploading graffiti images */
"ScrawlActionName": "uploadscrawl",/* Name of the action for uploading graffiti */
"ScrawlFieldName": "upfile",/* Name of the submitted image form */
"ScrawlPathFormat": "/ueditor/jsp/upload/image/{yyyy} {mm} {dd}/{time} {rand: 6}",/* upload and save path, you can customize the storage path and file name format */
"ScrawlMaxSize": 2048000,/* upload size limit, unit: B */
"ScrawlUrlPrefix": "",/* prefix of the image access path */
"ScrawlInsertAlign": "none ",


/* Tool upload */
"SnapscreenActionName": "uploadimage",/* Name of the uploaded action */
"SnapscreenPathFormat": "/ueditor/jsp/upload/image/{yyyy} {mm} {dd}/{time} {rand: 6}",/* upload and save path, you can customize the storage path and file name format */
"SnapscreenUrlPrefix": "",/* prefix of the image access path */
"SnapscreenInsertAlign": "none",/* floating mode of the inserted image */


/* Capture remote image configuration */
"CatcherLocalDomain": ["127.0.0.1", "localhost", "img.baidu.com"],
"CatcherActionName": "catchimage",/* Name of the action for capturing a remote image */
"CatcherFieldName": "source",/* Name of the submitted image list form */
"CatcherPathFormat": "/ueditor/jsp/upload/image/{yyyy} {mm} {dd}/{time} {rand: 6}",/* upload and save path, you can customize the storage path and file name format */
"CatcherUrlPrefix": "",/* prefix of the image access path */
"CatcherMaxSize": 2048000,/* upload size limit, unit: B */
"CatcherAllowFiles": [". png", ". jpg", ". jpeg", ". gif", ". bmp"],/* capture image format display */


/* Upload video configuration */
"VideoActionName": "uploadvideo",/* Name of the action for uploading a video */
"VideoFieldName": "upfile",/* Name of the submitted video form */
"VideoPathFormat": "/ueditor/jsp/upload/video/{yyyy} {mm} {dd}/{time} {rand: 6}",/* upload and save path, you can customize the storage path and file name format */
"VideoUrlPrefix": "http: // localhost: 8080/soulpower",/* video access path prefix */
"VideoMaxSize": 102400000,/* maximum upload size. Unit: B. Default Value: 100 MB */
"VideoAllowFiles ":[
". Flv", ". swf", ". mkv", ". avi", ". rm", ". rmvb", ". mpeg", ". mpg ",
". Ogg ",". ogv ",". mov ",". wmv ",". mp4 ",". webm ",". mp3 ",". wav ",". mid "],/* display the uploaded video format */


/* Upload File configuration */
"FileActionName": "uploadfile",/* in the controller, execute the video upload action name */
"FileFieldName": "upfile",/* Name of the submitted file form */
"FilePathFormat": "/ueditor/jsp/upload/file/{yyyy} {mm} {dd}/{time} {rand: 6}",/* upload and save path, you can customize the storage path and file name format */
"FileUrlPrefix": "http: // localhost: 8080/soulpower",/* file access path prefix */
"FileMaxSize": 51200000,/* maximum upload size. Unit: B. Default Value: 50 MB */
"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"
],/* Display the uploaded file format */


/* List images in the specified directory */
"ImageManagerActionName": "listimage",/* Name of the action for performing image management */
"ImageManagerListPath": "/ueditor/jsp/upload/image/",/* specify the directory for listing images */
"ImageManagerListSize": 20,/* Number of files listed each time */
"ImageManagerUrlPrefix": "http: // localhost: 8080/soulpower",/* image access path prefix */
"ImageManagerInsertAlign": "none",/* floating mode of the inserted image */
"ImageManagerAllowFiles": [". png", ". jpg", ". jpeg", ". gif", ". bmp"],/* file types listed */


/* List objects in the specified directory */
"FileManagerActionName": "listfile",/* Name of the action for executing file management */
"FileManagerListPath": "/ueditor/jsp/upload/file/",/* specify the directory of the file to be listed */
"FileManagerUrlPrefix": "http: // localhost: 8080/soulpower",/* file access path prefix */
"FileManagerListSize": 20,/* Number of files listed each time */
"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"
]/* Listed file types */


}

I mainly modified the upload prefix of various files so that the project can use the corresponding files. (Note that our congfig. json is the version of the UTF-8, When you deploy the project to the server through the text editor to modify this file is not effective, the project will be wrong, this is because of the encoding conflict problem, so I usually copy the changes to the server in IDE .)

Then the page is configured.

First introduce two js files

<script src="${pageContext.request.contextPath}/ueditor/ueditor.config.js" type="text/javascript"></script><script src="${pageContext.request.contextPath}/ueditor/ueditor.all.js"    type="text/javascript"></script>

Then we need to initialize two parameters.

<script type="text/javascript"><span style="white-space:pre"></span>$(function() {<span style="white-space:pre"></span>window.UEDITOR_HOME_URL = "${pageContext.request.contextPath}/ueditor/";<span style="white-space:pre"></span>window.REAL_PATH = "${pageContext.request.contextPath}";<span style="white-space:pre"></span>});</script><span style="white-space:pre"></span>

The two Parameters specify the ueditor usage path.

Add a uditor script to the body.

<script id="container" name="content" type="text/plain" style="width:100%;height:500px;"></script>

Then the container is initialized.

<script type="text/javascript">var ue = UE.getEditor("container");</script>

In this way, our ueditor can be used normally.

The following describes how to use the Image Upload and file upload functions independently.

Using the previous page, we

var ue = UE.getEditor("container");

Add the following javascript code

Container. ready (function () {// Set Editor unavailable // <pre name = "code" class = "html"> container <span style = "font-family: Arial, helvetica, sans-serif; ">. setDisabled (); </span>

// Hide the editor because the editor instance is not used.

container<span style="font-family: Arial, Helvetica, sans-serif;">.hide();</span>

// Listen on the Image Upload container. addListener ('beforsersertimage', function (t, arg ){
// Assign the address to the corresponding input $ ("#" + inpt ). val (arg [0]. src); // image preview $ ("#" + prev ). attr ("src", arg [0]. src) ;}); // listens to the file upload container. addListener ('afterupfile', function (t, arg ){
$ ("# File"). attr ("value", arg [0]. url );});});

// The function upImage () {var myImage = container appears in the Image Upload dialog box. getDialog ("insertimage"); myImage. open () ;}// the File Upload dialog box is displayed. function upFiles () {var myFiles = container. getDialog ("attachment"); myFiles. open ();}

You can call these two functions through the buttons to upload files and upload images separately. There is no problem with uploading images, but we need to make some modifications to file upload.

Open ueditor. all. js, locate the following location, and insert the red background code.

Commands :{
'Inserfile ':{
ExecCommand: function (command, filelist ){
Filelist = utils. isArray (filelist )? Filelist: [filelist];
If (me. fireEvent ('afterupfile', filelist) === true ){
Return;
}
Var I, item, icon, title,
Html = '',
URL = me. getOpt ('ueditor _ HOME_URL '),
IconDir = URL + (URL. substr (URL. length-1) = '/'? '': '/') + 'Dialogs/attachment/fileTypeImages /';
For (I = 0; I <filelist. length; I ++ ){
Item = filelist [I];
Icon = iconDir + getFileIcon (item. url );
Title = item. title | item. url. substr (item. url. lastIndexOf ('/') + 1 );
Html + = '<p style = "line-height: 16px;">' +
' '+
'<A style = "font-size: 12px; color: # 0066cc;" href = "' + item. url + '"title ="' + title + '">' + title + '</a>' +
'</P> ';
}
Me.exe cCommand ('insertml', html );
}
}
}

The main reason is that there is no afterUpfile event in ueditor. We will trigger it ourselves. (If your project has previously run a ueditor project, you must clear the browser cache after modification. Because ueditor has a cache, otherwise the modification will not take effect)