首页 > 代码库 > Nop3.8定制系列(二):UEditor编辑器

Nop3.8定制系列(二):UEditor编辑器

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!

Nop3.8定制系列(二):UEditor编辑器