码迷,mamicode.com
首页 > 其他好文 > 详细

NopCommerce定制系列(2)- UEditor

时间:2016-07-09 19:30:48      阅读:197      评论:0      收藏:0      [点我收藏+]

标签:

版本3.7.

由于Nop自带编辑器功能比较简单,所以换成UEditor编辑器。

UEditor官网,http://ueditor.baidu.com/website/,在开发版中下载 .Net UTF-8版本,解压,删除 net 文件夹下的 net.sln 和 README.md 文件。

一:引入

Nop.Web/Content下创建文件夹ueditor,添加解压后的文件,然后生成。

二:调用

Nop.Admin/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: 800,
15         initialFrameHeight: 400
16     });
17 </script>
18 
19 @Html.TextArea(string.Empty, /* Name suffix */
20     ViewData.TemplateInfo.FormattedModelValue /* Initial value */
21 )

 新闻为例,Nop.Admin/Views/News/_CreateOrUpdate.cshtml

1 <tr>
2             <td class="adminTitle">
3                 @Html.NopLabelFor(model => model.Full):
4             </td>
5             <td class="adminData">
6                 @Html.EditorFor(x => x.Full, "RichEditor")
7                 @Html.ValidationMessageFor(model => model.Full)
8             </td>
9         </tr>

这是以前的调用,将 RichEditor 改成 UEditor 即可。

最后效果如下:

技术分享

三:配置

 打开 Nop.Admin/Views/Shared/EditorTemplates/ueditor/ueditor.config.js ,配置文件。

技术分享

根据需要,删除对应的工具栏。

上传文件设置,打开 Nop.Admin/Views/Shared/EditorTemplates/ueditor/net/config.json

按照注释,更新相对应代码。上传图片为例:

默认代码

    /* 上传图片配置项 */
    "imageActionName": "uploadimage", /* 执行上传图片的action名称 */
    "imageFieldName": "upfile", /* 提交的图片表单名称 */
    "imageMaxSize": 2048000, /* 上传大小限制,单位B */
    "imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 上传图片格式显示 */
    "imageCompressEnable": true, /* 是否压缩图片,默认是true */
    "imageCompressBorder": 1600, /* 图片压缩最长边限制 */
    "imageInsertAlign": "none", /* 插入的图片浮动方式 */
    "imageUrlPrefix": "/ueditor/net/", /* 图片访问路径前缀 */
    "imagePathFormat": "upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */
                                /* {filename} 会替换成原文件名,配置这项需要注意中文乱码问题 */
                                /* {rand:6} 会替换成随机数,后面的数字是随机数的位数 */
                                /* {time} 会替换成时间戳 */
                                /* {yyyy} 会替换成四位年份 */
                                /* {yy} 会替换成两位年份 */
                                /* {mm} 会替换成两位月份 */
                                /* {dd} 会替换成两位日期 */
                                /* {hh} 会替换成两位小时 */
                                /* {ii} 会替换成两位分钟 */
                                /* {ss} 会替换成两位秒 */
                                /* 非法字符 \ : * ? " < > | */
                                /* 具请体看线上文档: fex.baidu.com/ueditor/#use-format_upload_filename */

更改后代码

/* 上传图片配置项 */
    "imageActionName": "uploadimage", /* 执行上传图片的action名称 */
    "imageFieldName": "upfile", /* 提交的图片表单名称 */
    "imageMaxSize": 2048000, /* 上传大小限制,单位B */
    "imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 上传图片格式显示 */
    "imageCompressEnable": true, /* 是否压缩图片,默认是true */
    "imageCompressBorder": 1600, /* 图片压缩最长边限制 */
    "imageInsertAlign": "none", /* 插入的图片浮动方式 */
    "imageUrlPrefix": "", /* 图片访问路径前缀 */
    "imagePathFormat": "/Content/Images/uploaded/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */
                                /* {filename} 会替换成原文件名,配置这项需要注意中文乱码问题 */
                                /* {rand:6} 会替换成随机数,后面的数字是随机数的位数 */
                                /* {time} 会替换成时间戳 */
                                /* {yyyy} 会替换成四位年份 */
                                /* {yy} 会替换成两位年份 */
                                /* {mm} 会替换成两位月份 */
                                /* {dd} 会替换成两位日期 */
                                /* {hh} 会替换成两位小时 */
                                /* {ii} 会替换成两位分钟 */
                                /* {ss} 会替换成两位秒 */
                                /* 非法字符 \ : * ? " < > | */
                                /* 具请体看线上文档: fex.baidu.com/ueditor/#use-format_upload_filename */

更改原因为 上传路径 与 访问路径不匹配。上述更改代码只是例子,可根据个人需求修改。

 

Nop使用UEditor完毕。

谢谢支持!

NopCommerce定制系列(2)- UEditor

标签:

原文地址:http://www.cnblogs.com/hcit/p/5656253.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!