ueditor1.4.3 configuration process (including the use of separate upload files and pictures)

The UTF-8 version of the JSP version of ueditor1.4.3 is used here.

First download the corresponding ueditor, copy the Ueditor folder directly into the project, the file structure is as follows:

Then the project to use the jar package into the Lib directory, before the import to modify the Ueditor jar package bug, this can be referred to here click Open Link

Next is the configuration of the JSP directory Config.json file, so that it can adapt to our project, the configuration content is as follows:

/* Front-end communication-related configuration, comments are only allowed in multiline mode */
{
/* Upload Picture configuration item */
"Imageactionname": "Uploadimage",/* Perform the action name of the upload picture */
"Imagefieldname": "Upfile", */* submitted picture form name */
"Imagemaxsize": 51200000,/* Upload size limit, Unit B */
"Imageallowfiles": [". png", ". jpg", ". jpeg", ". gif", ". bmp", ". SwF"],/* Upload picture format display */
"Imagecompressenable": true,/* whether to compress the picture, the default is true */
"Imagecompressborder": 1600,/* picture compression maximum edge limit */
"Imageinsertalign": "None",/* Insert Picture floating way */
"Imageurlprefix": "Http://localhost:8080/soulpower",/* Image access Path prefix */
"Imagepathformat": "/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}",/* Upload save path, you can customize save path and file name format */
/* {filename} will be replaced with the original file name, configure this need to pay attention to the Chinese garbled problem */
/* {Rand:6} will be replaced by random number, followed by the number of digits of the random number */
/* {time} will be replaced with a timestamp */
/* {YYYY} will be replaced by four-digit year */
/* {YY} will be replaced by two-digit year */
/* {mm} will be replaced by two-digit month */
/* {DD} will be replaced with two-bit date */
/* {HH} will be replaced by two-bit hours */
/* {II} will be replaced by two-bit minutes */
/* {SS} will be replaced by two-bit seconds */
/* Illegal characters \: *? "< > | */
/* Body View online Documentation: fex.baidu.com/ueditor/#use-format_upload_filename */


/* Doodle Picture Upload configuration item */
"Scrawlactionname": "Uploadscrawl",/* Perform the action name of the upload doodle */
"Scrawlfieldname": "Upfile", */* submitted picture form name */
"Scrawlpathformat": "/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}",/* Upload save path, you can customize save path and file name format */
"Scrawlmaxsize": 2048000,/* Upload size limit, Unit B */
"Scrawlurlprefix": "",/* Image access Path prefix */
"Scrawlinsertalign": "None",


/* Tool Upload */
"Snapscreenactionname": "Uploadimage",/* Perform the uploaded action name */
"Snapscreenpathformat": "/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}",/* Upload save path, you can customize save path and file name format */
"Snapscreenurlprefix": "",/* Image access Path prefix */
"Snapscreeninsertalign": "None",/* Insert Picture floating way */


/* Crawl Remote picture configuration */
"Catcherlocaldomain": ["127.0.0.1", "localhost", "img.baidu.com"],
"Catcheractionname": "Catchimage",/* Perform the action name to fetch the remote picture */
"Catcherfieldname": "Source",/* Picture List Form name submitted */
"Catcherpathformat": "/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}",/* Upload save path, you can customize save path and file name format */
"Catcherurlprefix": "",/* Image access Path prefix */
"Catchermaxsize": 2048000,/* Upload size limit, Unit B */
"Catcherallowfiles": [". png", ". jpg", ". jpeg", ". gif", ". bmp"],/* Fetch image format display */


/* Upload the video configuration */
"Videoactionname": "Uploadvideo",/* Perform the action name of the uploaded video */
"Videofieldname": "Upfile",/* Video Form name submitted */
"Videopathformat": "/ueditor/jsp/upload/video/{yyyy}{mm}{dd}/{time}{rand:6}",/* Upload save path, you can customize save path and file name format */
"Videourlprefix": "Http://localhost:8080/soulpower",/* Video access Path prefix */
"Videomaxsize": 102400000,/* Upload size limit, Unit B, default 100MB */
"Videoallowfiles": [
". flv", ". SwF", ". mkv", ". avi", ". Rm", ". rmvb", ". Mpeg", ". mpg",
". Ogg", ". Ogv", ". mov", ". wmv", ". mp4", ". WebM", ". mp3", ". wav", ". Mid"],/* Upload video format display */


/* Upload file Configuration */
"Fileactionname": "UploadFile",/* Controller, execute the action name of the uploaded video */
"Filefieldname": "Upfile",/* file Form name submitted */
"Filepathformat": "/ueditor/jsp/upload/file/{yyyy}{mm}{dd}/{time}{rand:6}",/* Upload save path, you can customize save path and file name format */
"Fileurlprefix": "Http://localhost:8080/soulpower",/* File access Path prefix */
"Filemaxsize": 51200000,/* Upload size limit, Unit B, default 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"
],/* Upload file format display */


/* List the pictures under the specified directory */
"Imagemanageractionname": "ListImage",/* Perform picture management action name */
"Imagemanagerlistpath": "/ueditor/jsp/upload/image/",/* Specify the directory to list the pictures */
"Imagemanagerlistsize": 20,/* Number of files per list */
"Imagemanagerurlprefix": "Http://localhost:8080/soulpower",/* Image access Path prefix */
"Imagemanagerinsertalign": "None",/* Insert Picture floating way */
"Imagemanagerallowfiles": [". png", ". jpg", ". jpeg", ". gif", ". bmp"],/* File types listed */


/* List files under the specified directory */
"Filemanageractionname": "ListFile",/* Perform file management action name */
"Filemanagerlistpath": "/ueditor/jsp/upload/file/",/* Specifies the directory to list the files */
"Filemanagerurlprefix": "Http://localhost:8080/soulpower",/* File access Path prefix */
"Filemanagerlistsize": 20,/* Number of files per list */
"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"
]/* File types listed */


}

I mainly modified the various file upload prefix, so that the project can use the corresponding files. (note here that our Congfig.json is a UTF-8 version, when you deploy the project to the server when you modify the file through a text editor is not effective, the project will be wrong, because the problem of coding conflicts, So I usually modify the IDE in the future between the replication to the server.)

Then there is the configuration of the page

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

These two parameters are the use path of the specified ueditor

Then add a uditor script to the body.

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

And then it's initializing the container.

<script type= "Text/javascript" >var UE = Ue.geteditor ("container");</script>

So that our ueditor can be used normally.

The following describes how to use the image upload function and file upload function independently

Using the page we just had, we

var UE = Ue.geteditor ("container");

Add the following JavaScript code

Container.ready (function () {    //settings editor not available    //<pre name= "code" class= "HTML" >container<span style= " Font-family:arial, Helvetica, Sans-serif; >.setdisabled ();</span>

Hide the editor, because this editor instance is not used, so hide

Container<span style= "font-family:arial, Helvetica, Sans-serif;" >.hide ();</span>

Listen for picture uploadsContainer. AddListener (' Beforeinsertimage ', function (t, ARG) {
Assign the address to the corresponding input $ ("#" +INPT). Val (ARG[0].SRC); Picture Preview $ ("#" +prev). attr ("src", arg[0].src); }); Listening for file uploadsContainer. AddListener (' Afterupfile ', function (t, ARG) {
$ ("#file"). attr ("value", Arg[0].url); });});

Popup Image Upload Dialog Function upimage () {    var myimage = Container.getdialog ("Insertimage");    Myimage.open ();} Popup File Upload dialog box function upfiles () {    var myFiles = container.getdialog ("attachment");    Myfiles.open ();}

The use of buttons to invoke these two functions can be done by the file upload and image upload alone. There is no problem with uploading pictures, but we need to make some changes to upload the files.

Open Ueditor.all.js, find the following location, insert code with red background

commands:{
' InsertFile ': {
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.execcommand (' inserthtml ', HTML);
}
}
}

The main thing is that there is no Afterupfile event in Ueditor, we trigger it ourselves. (If your project has previously run a ueditor project, then change it here to be careful to clear the browser cache, because Ueditor is cached, otherwise the modification will not take effect)

ueditor1.4.3 configuration process (including the use of separate upload files and pictures)