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

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

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

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

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

            //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.导入到需要使用的页面

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

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

4.在文本框中声明

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

                         <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.初始化文本编辑器

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

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

6.最终效果如下:

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

上一篇:Django项目中添加富文本编辑器django-ckeditor


下一篇:django中ckeditor富文本编辑器使用