Nop3.8定制系列：UEditor编辑器

Posted 2020-08-18

Nop中使用UEditor编辑器，官网 http://ueditor.baidu.com/website/ 

下载后解压。

\\Presentation\\Nop.Web\\Content 下，新建文件夹 ueditor，将解压后的文件 copy 至此文件夹。

\\Presentation\\Nop.Web\\Administration\\Views\\Shared\\EditorTemplates 下新建页面 UEditor.cshtml 

 1 @model String
 2 @using Nop.Core
 3 @using Nop.Core.Domain.Common
 4 @using Nop.Services.Security
 5 @using Nop.Web.Framework.UI
 6 @{
 7     Html.AddScriptParts("~/Content/ueditor/ueditor.config.js");
 8     Html.AddScriptParts("~/Content/ueditor/ueditor.all.js");
 9     Html.AddScriptParts("~/Content/ueditor/lang/zh-cn/zh-cn.js");
10 }
11 
12 <script>
13     UE.getEditor("@ViewData.TemplateInfo.GetFullHtmlFieldId(string.Empty)", {
14         initialFrameWidth: ‘100%‘,
15         initialFrameHeight: 300
16     });
17 </script>
18 
19 @Html.TextArea(string.Empty, /* Name suffix */
20     ViewData.TemplateInfo.FormattedModelValue /* Initial value */
21 )

使用时，将调用编辑器的 RichEditor 改成 UEditor 即可。

1 <div class="form-group">
2                     <div class="col-md-3">
3                         @Html.NopLabelFor(model => model.Full)
4                     </div>
5                     <div class="col-md-9">
6                         @Html.EditorFor(x => x.Full, "RichEditor")
7                         @Html.ValidationMessageFor(model => model.Full)
8                     </div>
9                 </div>

至于编辑器里面的上传路径及菜单，就自己看着改吧，没难度。

 

Over!