码迷,mamicode.com
首页 > Web开发 > 详细

ASP.MVC 项目中使用 UEditor 文本编辑器

时间:2015-11-05 18:28:59      阅读:275      评论:0      收藏:0      [点我收藏+]

标签:

1.下载UEditor 源文件,并导入项目中

技术分享

2.添加项目中需要使用的CSS和JS

技术分享

            //Ueditor 文本编辑器必备的StyleBundle和ScriptBundle
            StyleBundle ueditorcss = new StyleBundle("~/assets/plugins/ueditor/themes/default/css");
            ScriptBundle ueditorjquery = new ScriptBundle("~/assets/plugins/ueditor");

            //添加Ueditor 文本编辑器的样式
            ueditorcss.Include("~/assets/plugins/ueditor/themes/default/css/ueditor.css");

            //添加Ueditor 文本编辑器的JS
            ueditorjquery.Include("~/assets/plugins/ueditor/ueditor.config.js",
                           "~/assets/plugins/ueditor/ueditor.all.js",
                           "~/assets/plugins/ueditor/lang/zh-cn/zh-cn.js");

 

3.导入到需要使用的页面

技术分享

@section header{
    @Styles.Render("~/assets/plugins/ueditor/themes/default/css")
    @Scripts.Render("~/assets/plugins/ueditor")
}

 

4.在文本框中声明

技术分享

                         <div class="form-group">
                            <label class="control-label col-md-2">说明&nbsp;&nbsp;</label>
                            <div class="col-md-8">
                                @Html.TextAreaFor(m => m.Description)
                            </div>
                        </div>

5.初始化文本编辑器

技术分享

@section footer{
    <script>
        jQuery(document).ready(function () {
            Layout.setSidebarMenuActiveLink(set, $(#@ViewBag.CLASSID));
            UE.getEditor("Description");//初始化富文本编辑器
        });
    </script>
}

6.最终效果如下:

技术分享

ASP.MVC 项目中使用 UEditor 文本编辑器

标签:

原文地址:http://www.cnblogs.com/cube/p/4940040.html

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