To teach you to use the Ueditor editor in asp.net mvc

Recently, the Ueditor editor was used to configure the. NET Mvc4 project, and several problems were encountered during the configuration process to document the solution.

First go here to download http://ueditor.baidu.com/website/download.html

Then duplicate the name of the download folder for Ueditor (want to start their own names can also, but the configuration file will be changed to the same, here in order to avoid trouble, with the name in the configuration file to keep the same)

and put it in the project according to what I need to do.

The folder above is also consistent with the configuration file, not to do so, here is just the same as the configuration file, you can modify the configuration file according to their own needs, how to make the bank, look at the configuration file will understand

Config.json

The code is as follows

Copy Code

/* Front and back end communication related configuration, note only allowed to use multiple lines * * { /* Upload Picture configuration Item * * "Imageactionname": "Uploadimage",/* Execute the action name of the uploaded image/* "Imagefieldname": "Upfile", * * submitted picture form name * * * "Imagemaxsize": 2048000,/* upload size limit, Unit b * * "Imageallowfiles": [". png", ". jpg", ". jpeg", ". gif", ". bmp"],/* upload picture format display * * "Imagecompressenable": true,/* whether the picture is compressed, the default is true * * "Imagecompressborder": 1600,/* picture compression Maximum edge limit * * "Imageinsertalign": "None", * * Insert the picture floating mode * * "Imageurlprefix": "scripts/ueditor/net/",/* Image access Path prefix * * "Imagepathformat": "Upload/image/{yyyy}{mm}{dd}/{time}{rand:6}",/* Upload save path, you can customize the save path and file name format * * /* {filename} will be replaced by the original filename, configure this need to pay attention to the Chinese garbled problem * * /* {RAND:6} will replace the random number, followed by the number of random number of digits * * /* {time} will be replaced with a timestamp * * /* {YYYY} will be replaced by four-bit year * * /* {YY} will be replaced by two-bit year * * /* {mm} will be replaced by two-digit month * * /* {DD} will be replaced with two-digit date. * * {HH} will be replaced by two-hour/ /* {II} will be replaced by two-bit minutes */ /* {SS} will be replaced by two-bit seconds * * /* Illegal characters \: *? "< > | */ * * Please look at the online document: fex.baidu.com/ueditor/#use-format_upload_filename * * * * Graffiti Picture Upload configuration Item * * "Scrawlactionname": "Uploadscrawl", * * Execute the name of the action to upload graffiti * * "Scrawlfieldname": "Upfile", * * submitted picture form name * * * "Scrawlpathformat": "Upload/image/{yyyy}{mm}{dd}/{time}{rand:6}",/* Upload save path, you can customize the save path and file name format * * "Scrawlmaxsize": 2048000,/* Upload size limit, Unit b * * "Scrawlurlprefix": "/ueditor/net/",/* Image access Path prefix * * "Scrawlinsertalign": "None", /* screenshot tool upload/* "Snapscreenactionname": "Uploadimage", * * Execute upload screenshot of the action name * * "Snapscreenpathformat": "Upload/image/{yyyy}{mm}{dd}/{time}{rand:6}",/* Upload save path, you can customize the save path and file name format * * "Snapscreenurlprefix": "/ueditor/net/",/* Image access Path prefix * * "Snapscreeninsertalign": "None", * * Insert the picture floating mode * * /* Crawl Remote picture configuration * * "Catcherlocaldomain": ["127.0.0.1", "localhost", "img.baidu.com"], "Catcheractionname": "Catchimage",/* Execute the action name of the crawl remote picture * * "Catcherfieldname": "Source", * * submitted picture List Form name * * "Catcherpathformat": "Upload/image/{yyyy}{mm}{dd}/{time}{rand:6}",/* Upload save path, you can customize the save path and file name format * * "Catcherurlprefix": "/ueditor/net/",/* Image access Path prefix * * "Catchermaxsize": 2048000,/* Upload size limit, Unit b * * "Catcherallowfiles": [". png", ". jpg", ". jpeg", ". gif", ". bmp"],/* Grab picture format Display * * /* Upload Video Configuration * * "Videoactionname": "Uploadvideo",/* Execute the action name of the upload video * * "Videofieldname": "Upfile", * * submitted video form name * * * "Videopathformat": "Upload/video/{yyyy}{mm}{dd}/{time}{rand:6}",/* Upload save path, you can customize the save path and file name format * * "Videourlprefix": "/ueditor/net/",/* 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 upload video * * "Filefieldname": "Upfile", * * submitted document form name * * "Filepathformat": "Upload/file/{yyyy}{mm}{dd}/{time}{rand:6}",/* Upload save path, you can customize the save path and file name format * * "Fileurlprefix": "/ueditor/net/",/* 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",/* Execute Picture Management action name * * "Imagemanagerlistpath": "Upload/image",/* Specify the directory to which you want to list the pictures * * "Imagemanagerlistsize": 20,/* The number of documents per list * * "Imagemanagerurlprefix": "/ueditor/net/",/* Image access Path prefix * * "Imagemanagerinsertalign": "None", * * Insert the picture floating mode * * "Imagemanagerallowfiles": [". png", ". jpg", ". jpeg", ". gif", ". bmp"],/* listed file Types * * /* List files in the specified directory/* "Filemanageractionname": "ListFile",/* Execute File Management action name * * "Filemanagerlistpath": "Upload/file",/* Specifies the directory to which you want to list files * * "Filemanagerurlprefix": "/ueditor/net/",/* File access Path prefix * * "Filemanagerlistsize": 20,/* The number of documents 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" ]/* List of file types * * }

If you want to customize, the following configuration items must be changed

The code is as follows	Copy Code
"Imageurlprefix": "scripts/ueditor/net/",/* Image access Path prefix * * "Imagepathformat": "Upload/image/{yyyy}{mm}{dd}/{time}{rand:6}",/* Upload save path, you can customize the save path and file name format * * "Fileurlprefix": "/ueditor/net/",/* File access Path prefix * *

Configuration file Ueditor.config.js The following

Window. Ueditor_home_url can be specified without specifying or specifying, and that is specified in the MVC view, as shown in the following

The code is as follows	Copy Code
...... <script type= "Text/javascript" > var editor = new Baidu.editor.ui.Editor ({ Ueditor_home_url: '/scripts/ueditor/',//configuration Editor path Iframecssurl: '/scripts/ueditor/themes/iframe.css ',//style path ...... </script> ......

Anyway, here are a few steps

1. Download the Ueditor plugin, put the folder in the root of the project, renamed, Easy to be consistent with the configuration file.

2. Create a Controller, action method plus [ValidateInput (false)]

 

code is as follows
Publicclassueditorc Ontroller:controller { [ValidateInput (false)] //get:ueditor publicactionresult Index (formcollect Ion FC) { } }

 

3. Create a view with the view name consistent with the controller action method name

The code is as follows

Copy Code

<script src= "~/scripts/ueditor/ueditor.config.js" ></script> <script src= "~/scripts/ueditor/ueditor.all.min.js" ></script> <link href= "~/scripts/ueditor/themes/iframe.css" rel= "stylesheet"/> <script src= "~/scripts/ueditor/lang/zh-cn/zh-cn.js" ></script> @{ Viewbag.title = "Ueditordemo"; } <script type= "Text/javascript" > var editor =newbaidu.editor.ui.editor ({ Ueditor_home_url: '/scripts/ueditor/',//configuration Editor path Iframecssurl: '/scripts/ueditor/themes/iframe.css ',//style path Initialcontent: ',//Initialize editor contents autoheightenabled:true,//Height automatic growth minframeheight:500,//Minimum Height Autofloatenabled:true, initialframewidth:690, initialframeheight:483 }); Editor.render (' editor '); </script> @using (Html.BeginForm ("Index", "Ueditor", FormMethod.Post)) { <textarea id= "Editor" name= "editor" ></textarea> <input type= "Submit" value= "submitted"/> }

4. Modify controller as follows

The code is as follows	Copy Code
Publicactionresult Index (FormCollection FC) { var content = fc["Editor"]; Returnview (); }

5. Home Page pop-up ueditor to test, modify the App_start folder under the Routeconfig

The code is as follows	Copy Code
Publicclassrouteconfig { Publicstaticvoidregisterroutes (routecollection routes) { Routes. Ignoreroute ("{resource}.axd/{*pathinfo}"); Routes. Maproute ( Name: "Default", URL: ' {controller}/{action}/{id} ', defaults:new {controller = "Home", action = "Index", id = urlparameter.optional} defaults:new{controller = "Ueditor", action = "Index", id = urlparameter.optional} ); } }

6. By default we do not need to ueditor all buttons on the toolbar, need to screen some, this time need to modify Ueditor.config.js

The code is as follows

Copy Code

, toolbars: [[ ' fullscreen ', ' source ', ' | ', ' undo ', ' Redo ', ' | ', ' Bold ', ' italic ', ' underline ', ' fontborder ', ' strikethrough ', ' superscript ', ' subscript ', ' removeformat ', ' Formatmatch ', ' autotypeset ', ' blockquote ', ' pasteplain ', ' | ', ' ForeColor ', ' BackColor ', ' insertorderedlist ', ' Insertunorderedlist ', ' selectall ', ' cleardoc ', ' | ', ' Rowspacingtop ', ' rowspacingbottom ', ' lineheight ', ' | ', ' Customstyle ', ' paragraph ', ' fontfamily ', ' fontsize ', ' | ', ' Directionalityltr ', ' Directionalityrtl ', ' indent ', ' | ', ' Justifyleft ', ' justifycenter ', ' justifyright ', ' justifyjustify ', ' | ', ' touppercase ', ' tolowercase ', ' | ', ' Link ', ' unlink ', ' anchor ', ' | ', ' imagenone ', ' imageleft ', ' imageright ', ' imagecenter ', ' | ', ' Simpleupload ', ' insertimage ', ' emotion ', ' scrawl ', ' insertvideo ', ' music ', ' attachment ', ' map ', ' gmap ', ' Insertframe ', ' insertcode ', ' webapp ', ' pagebreak ', ' template ', ' background ', ' | ', ' Horizontal ', ' date ', ' time ', ' spechars ', ' snapscreen ', ' wordimage ', ' | ', ' Inserttable ', ' deletetable ', ' insertparagraphbeforetable ', ' insertrow ', ' deleterow ', ' insertcol ', ' deletecol ', ' MergeCells ', ' mergeright ', ' mergedown ', ' splittocells ', ' splittorows ', ' splittocols ', ' charts ', ' | ', ' Print ', ' preview ', ' searchreplace ', ' Drafts ', ' help ' ' Undo ', ' Redo ', ' | ', ' Bold ', ' ForeColor ', ' Removeformat ', ' autotypeset ', ' pasteplain ', ' | ', ' | ', ' Justifyleft ', ' justifycenter ', ' justifyright ', ' justifyjustify ', ' | ', ' Link ', ' unlink ', ' | ', ' Simpleupload ', ' insertimage ', ' | ', ' Wordimage ', ' | ', ' Inserttable ', ' insertrow ', ' deleterow ', ' insertcol ', ' deletecol ', ' mergecells ', ' splittocells ' ]]

As above, I have commented out the original toolbar configuration item and run it with the following effect

has been missing a lot of the usual use of the button, well done ~!