Nopcommerce Custom Series (2)-Ueditor

Version 3.7.

Since NOP comes with a simple editor function, it is replaced by the Ueditor editor.

Ueditor official website, http://ueditor.baidu.com/website/, download the. NET UTF-8 version in the development version, unzip, delete the Net.sln and readme.md files under the Net folder.

One: Introduction

Nop.web/content Create the folder Ueditor, add the extracted files, and then generate.

Two: Call

Add ueditor.cshtml under Nop.admin/views/shared/editortemplates

The code is as follows:

1 @model String2 @using Nop.core3 @using Nop.Core.Domain.Common4 @using Nop.Services.Security5 @using Nop.Web.Framework.UI6 @{7Html.addscriptparts ("~/content/ueditor/ueditor.config.js");8Html.addscriptparts ("~/content/ueditor/ueditor.all.js");9Html.addscriptparts ("~/content/ueditor/lang/zh-cn/zh-cn.js");Ten } One  A<script> -Ue.geteditor ("@ViewData. Templateinfo.getfullhtmlfieldid (String. Empty)", { -Initialframewidth: -, theInitialframeheight: - -     }); -</script> -  +@Html. TextArea (string. Empty,/*Name suffix*/ -ViewData.TemplateInfo.FormattedModelValue/*Initial Value*/ +)

News For example, nop.admin/views/news/_createorupdate.cshtml

1<tr>2<tdclass="Admintitle">3@Html. noplabelfor (model =model. Full):4</td>5<tdclass="Admindata">6@Html. editorfor (x = X.full,"Richeditor")7@Html. validationmessagefor (model =model. Full)8</td>9</tr>

This is the previous call to change the Richeditor to Ueditor.

The final effect is as follows:

Three: Configuration

Open the Nop.admin/views/shared/editortemplates/ueditor/ueditor.config.js. config file.

Delete the corresponding toolbar as needed.

Upload file settings, open Nop.admin/views/shared/editortemplates/ueditor/net/config.json

Follow the comments to update the relative code. Upload image for example:

Default Code

    /*Uploading picture Configuration items*/    "Imageactionname":"Uploadimage",/*execute the action name of the upload picture*/    "Imagefieldname":"Upfile",/*name of the submitted picture form*/    "imagemaxsize":2048000,/*Upload size limit, Unit B*/    "Imageallowfiles": [". PNG",". jpg",". JPEG",". gif",". bmp"],/*upload image format display*/    "imagecompressenable":true,/*whether to compress the picture, the default is True*/    "Imagecompressborder": the,/*picture compression maximum edge limit*/    "imageinsertalign":"None",/*How to insert a picture floating*/    "Imageurlprefix":"/ueditor/net/",/*Picture access Path prefix*/    "Imagepathformat":"Upload/image/{yyyy}{mm}{dd}/{time}{rand:6}",/*upload save path, can customize save path and file name format*/                                /*{filename} will be replaced with the original file name, configuring this requires 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} is 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 with two-bit seconds*/                                /*illegal characters \: *? "< > |*/                                /*See the online document: fex.baidu.com/ueditor/#use-format_upload_filename*/

Post-Change Code

/*Uploading picture Configuration items*/    "Imageactionname":"Uploadimage",/*execute the action name of the upload picture*/    "Imagefieldname":"Upfile",/*name of the submitted picture form*/    "imagemaxsize":2048000,/*Upload size limit, Unit B*/    "Imageallowfiles": [". PNG",". jpg",". JPEG",". gif",". bmp"],/*upload image format display*/    "imagecompressenable":true,/*whether to compress the picture, the default is True*/    "Imagecompressborder": the,/*picture compression maximum edge limit*/    "imageinsertalign":"None",/*How to insert a picture floating*/    "Imageurlprefix":"",/*Picture access Path prefix*/    "Imagepathformat":"/content/images/uploaded/{time}{rand:6}",/*upload save path, can customize save path and file name format*/                                /*{filename} will be replaced with the original file name, configuring this requires 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} is 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 with two-bit seconds*/                                /*illegal characters \: *? "< > |*/                                /*See the online document: fex.baidu.com/ueditor/#use-format_upload_filename*/

The reason for the change is that the upload path does not match the access path. The above change code is an example and can be modified according to individual needs.

NOP is finished using Ueditor.

Thank you for your support!

Nopcommerce Custom Series (2)-Ueditor