Step by step, you can use the UEditor editor and mvcueditor in Asp.net Mvc.

Step by step, you can use the UEditor editor and mvcueditor in Asp.net Mvc.

Recently, the ueditor was used in the configuration of the. net mvc4 project. Several problems were encountered during the configuration process to record the solution.

First download

Rename the downloaded folder as ueditor (you can name it yourself, but you have to change the configuration file to the same one. Here, we will keep the name consistent with the name in the configuration file to avoid the trouble)

And put it in the project as needed.

The folder created above is also consistent with the configuration file, and does not need to be followed. Here it is only consistent with the configuration file. You can modify the configuration file as needed, and how do you want to create the folder, check the configuration file to understand.

Config. json

/* Configuration related to frontend and backend communication. Only multiline mode */{/* upload image configuration item */"imageActionName": "uploadimage ", /* action name of the image to be uploaded */"imageFieldName": "upfile",/* Name of the submitted image form */"imageMaxSize": 2048000,/* upload size limit, unit B */"imageAllowFiles ":[". png ",". jpg ",". jpeg ",". gif ",". bmp "],/* upload image format display */" imageCompressEnable ": true,/* Whether to compress the image. The default value is true */" imageCompressBorder ": 1600, /* maximum side limit of Image Compression */"imageInsertAlign": "none",/* floating mode of the inserted image */ "ImageUrlPrefix": "Scripts/ueditor/net/",/* prefix of the image access path */"imagePathFormat ": "upload/image/{yyyy} {mm} {dd}/{time} {rand: 6}",/* upload and save path, you can customize the storage path and file name format * // * {filename} will be replaced with the original file name. to configure this, pay attention to Chinese garbled characters * // * {rand: 6} is replaced with a random number, the following number is the number of digits of the random number * // * {time} will be replaced with the timestamp * // * {yyyy} will be replaced with the four-digit year * // * {yy} Will replace the two-digit year * // * {mm} with the two-digit month * // * {dd} with the two-digit date * // * {hh} with the two-hour * // * {ii} will be replaced with two minutes * // * {ss} will be replaced with two seconds * // * invalid characters \ :*? "<> | * // * For more information, see the online documentation fex.baidu.com/ueditor/#use-format_upload_filename */* graffiti Image Upload configuration item */" scrawlActionName ":" uploadscrawl ", /* Name of the action for uploading graffiti */"scrawlFieldName": "upfile",/* Name of the submitted image form */"scrawlPathFormat ": "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, in the unit of B */"scrawlUrlPrefix": "/ueditor/net /", /* image access path prefix */"scrawlInsertAlign": "none",/* tool upload */"snapscreenActionName": "uploadimage ", /* Name of the action to be uploaded */"snapscreenPathFormat": "upload/image/{yyyy} {mm} {dd}/{time} {rand: 6 }", /* upload and save path. You can customize the Save path and file name format */"snapscreenUrlPrefix": "/ueditor/net/",/* image access path prefix */"snapscreenInsertAlign ": "none",/* floating mode of inserted images * // * capture remote image configuration */"catcherLocalDomain": ["127.0.0.1", "localhost", "img.baidu.com"], "catcherActionName": "catchimage",/* Name of the action for capturing remote images */"catcherFieldName": "source ", /* Name of the submitted image list form */"catcherPathFormat": "upload/image/{yyyy} {mm} {dd}/{time} {rand: 6 }", /* upload and save path. You can customize the Save path and file name format */"catcherUrlPrefix": "/ueditor/net/",/* image access path prefix */"catcherMaxSize ": 2048000,/* upload size limit, in the unit of B */"catcherAllowFiles ":[". png ",". jpg ",". jpeg ",". gif ",". bmp "],/* capture image format display * // * upload video configuration */" videoActionName ":" uploadvideo ", /* action name of the video to be uploaded */"videoFieldName": "upfile",/* Name of the submitted video form */"videoPathFormat ": "upload/video/{yyyy} {mm} {dd}/{time} {rand: 6}",/* upload and save path, you can customize the storage path and file name format */"videoUrlPrefix": "/ueditor/net/",/* 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 "],/* upload video format display * // * Upload File configuration */" fileActionName ":" uploadfile ",/* controller, the action name of the video to be uploaded */"fileFieldName": "upfile",/* The Name Of The submitted file form */"filePathFormat ": "upload/file/{yyyy} {mm} {dd}/{time} {rand: 6}",/* upload and save path, you can customize the storage path and file name format */"fileUrlPrefix": "/ueditor/net/",/* 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 "],/* Upload File Format display * // * List images in the specified directory */" imageManagerActionName ":" listimage ", /* action name for image management */"imageManagerListPath": "upload/image",/* specify the directory for listing images */"imageManagerListSize": 20, /* Number of files listed each time */"imageManagerUrlPrefix": "/ueditor/net/",/* image access path prefix */"imageManagerInsertAlign": "none ", /* floating mode of the inserted image */"imageManagerAllowFiles ":[". png ",". jpg ",". jpeg ",". gif ",". bmp "],/* file types listed * // * List Files in the specified directory */" fileManagerActionName ":" listfile ", /* action name for executing file management */"fileManagerListPath": "upload/file",/* specify the directory of the file to be listed */"fileManagerUrlPrefix ": "/ueditor/net/",/* 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 "]/* file types listed */}

If you want to customize the configurations, the following configuration items must be modified:

"ImageUrlPrefix": "Scripts/ueditor/net/",/* prefix of the image access path */"imagePathFormat ": "upload/image/{yyyy} {mm} {dd}/{time} {rand: 6}",/* upload and save path, you can customize the storage path and file name format */"fileUrlPrefix": "/ueditor/net/",/* file access path prefix */

Under the configuration file ueditor. config. js

Window. UEDITOR_HOME_URL can be specified or not, if not, it is specified in the MVC view, as shown below

...... <Script type = "text/javascript"> var editor = new baidu. editor. ui. editor ({UEDITOR_HOME_URL: '/Scripts/ueditor/', // configure the Editor path iframeCssUrl: '/Scripts/ueditor/themes/iframe.css ', // style path ...... </script> ......

Here are the steps below:

1. Download The UEditor plug-in, place the folder in the root directory of the project, and rename the folder. The configuration file is the same if it is easy to use.

2. Create a Controller and add [ValidateInput (false)] to the Action method.

 public class UEditorController : Controller { [ValidateInput(false)] // GET: UEditor public ActionResult Index(FormCollection fc) { } }

3. Create a view. The view name is consistent with the Action Method Name of the Controller.

<Script src = "~ /Scripts/ueditor. config. js "> </script> <script src = "~ /Scripts/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 = new baidu. editor. ui. editor ({UEDITOR_HOME_URL: '/Scripts/ueditor/', // configure the Editor path iframeCssUrl: '/Scripts/ueditor/themes/iframe.css', // The style path initialContent :'', // initialize the editor content autoHeightEnabled: true, // height auto-increment 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 = "submit"/>}

4. Modify the Controller as follows:

 public ActionResult Index(FormCollection fc) {  var content = fc["editor"];  return View(); }

5. The UEditor page is displayed on the homepage for testing. Modify RouteConfig in the App_Start folder.

 public class RouteConfig { public static void RegisterRoutes(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 all buttons on the UEditor toolbar. We need to block them. In this case, we need to modify ueditor. config. js.

 , 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 shown above, I have commented out the original toolbar configuration items. The following effect is displayed after running:

There are already a lot of buttons that are not commonly used ~!

Summary

The above is all about this article. I hope this article will help you learn or use Asp.net. If you have any questions, please leave a message.