bootstrap adminlte教程6：整个百度UEditor富文本编辑器

一，在官网下载，今天下的最新版是1.4.3

http://ueditor.baidu.com

下载utf-8 net

下载后解压，将文件夹改为ueditor

二、在VS项目中打开资 源管理器，将\ueditor文件夹COPY到目录的根目录。

 6、打开需要改造的Create视图和Edit视图，相关的操作方式是完全一样的。我们先打开CmsContent的Create视图。

7、找到需要改造的地方，将原来的注释掉或者删除掉。

 通常视图自动生成的是@Html.EditorFor(model => model.文档内容, new { htmlAttributes = new { @class = "form-control" } })

   现在直接用 @Html.TextAreaFor(model => model.文档内容,htmlAttributes:new { @id="neirong"}) 替换掉。

<div class="form-group">
							<div class="control-label col-md-2">请输入内容</div>
							<div class="col-md-10">
							
								
								@Html.TextAreaFor(model => model.Contents, htmlAttributes: new { @id = "neirong" })
								@*@Html.EditorFor(model => model.Contents, new { htmlAttributes = new { @class = "form-control" } })*@
								@Html.ValidationMessageFor(model => model.Contents, "", new { @class = "text-danger" })
							</div>
						</div>

 

8.然后找到底部的脚本代码@Scripts.Render("~/bundles/jqueryval"）

  替换为@Scripts.Render("~/bundles/jqueryval", "~/ueditor/ueditor.config.js", "~/ueditor/ueditor.all.js") 

不过我是用了布局，所以我要找到_AdminLayout 和　　_Layout.cshtml 两个布局页面更改。

@Scripts.Render("~/bundles/adminlte", "~/ueditor/ueditor.config.js", "~/ueditor/ueditor.all.js")

　　

紧接着上面的代码，在下面写如下代码，这里我没有做任何配置设置，因为我的全站不存在第二种样式，所以我直接在后面的ueditor配置文件中设置了。

官方示例中建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例

<script type="text/javascript">

var nreditor = UE.getEditor('neirong'); 
</script>

下面是做了参数配置的

<script type="text/javascript">
var editorOption = { 
initialFrameWidth: 784,
initialFrameHeight: 400
};
var editor = new baidu.editor.ui.Editor(editorOption);
editor.render('neirong');
</script>

 

我先使用了第种未配置 的，实际 我在想，这个JS在这里引用不好，我以后不同的显示调用的大小不一样，最好在页面中引用JS

先作测试。

<script type="text/javascript">

		var nreditor = UE.getEditor('neirong');
	</script>

　　进Create页面看效果。

好烦这么多功能，可是没办法，那官网的 umedit硬是下不下来。

10、现在运行就应该能看到富文本编辑效果了，但是这样还不行，很多功能还不正常需要对ueditor进行。

11、打开~/ueditor/ueditor.config.js。

      再往下面的就是配置的参数了，文件上方的官方提示已经说了“所有被注释的配置项均为UEditor默认值。”

     所以根据自己的需要，删除参数前面的“//”就行了，一定不要把后面的逗号也删除了。

 

所以我觉和得还是将上面的JS在页面引用最好了，我马上 试一下。

取消L布局中的js的引用。

然后在Create视图中引用JS，这里需要在@sestion中引用哟，在最后加上

	</div>
@section Scripts {
	
	<script type="text/javascript">
var editorOption = {
//initialFrameWidth: 784,
initialFrameHeight: 400
};
var editor = new baidu.editor.ui.Editor(editorOption);
editor.render('neirong');
</script>
	
	
	}

　　再看效果，出来了，高度出来了。

 

 

 

12、配置config.json。打开~/ueditor/net文件夹下的config.json文件。

如果是按照我的实施规则来的话，此文件不用动。如果有变动的话需要修改图片访问前缀 "imageUrlPrefix": "/ueditor/net/"。如果配置错误的前缀路径，能正确上传图片等，但是不能在线编辑、不能访问，图片就显示不正常。验证是否正确的方法是在富文本编辑器里上传个图片，如果能显示此图片则正常。

同时，也可以配置其他项。例如"imageMaxSize": 2048000, /* 上传大小限制，单位B */  等等。

 我进去更改了所有上传大小，他默认的都是100M，50M，图片5M，呵，我改成图片500K，文件3M，视频500K等

13.然后测试内容

 

 结果需要配置方法中取消这个验证。

具体在方法前加一句false

 [HttpPost]
        [ValidateAntiForgeryToken]
		[ValidateInput(false)]
		public async Task<ActionResult> Create([Bind(Include = "ColumnId,Title,Contents,CmsPermission")] CmsContent cmsContent, FormCollection form)
        {
		    var	 dt = DateTime.Now;

　然后大神们说前台有简化的编辑嘎哈，这个只能用后台上。

 

13、然后在相关视图的控制器中Create和Edit 的httpPost方法中加入 [ValidateInput(false)]属性。 然后数据库将html标签保存到数据库中。如果不加入此注解，表单将不能正确的提交，并出现 ”潜在的风险的Request.Form值。

14、在系统自动创建的Detials操作方法的视图中找到对应的显示位置，将原来的@Html.DisplayFor(model => model.文档内容)改为@Html.Raw(Model.文档内容)，也就是对数据提取出来的Content 字段的html标签不进行编码。

这样就能正常使用了。

 

 

U新建不存在，但Edit就出错了，原因是很多字段是非空的，特别日期，你读出来，他会变，除非你再FORMAT,可我当时没有这样做，而且几个下拉也有问题，POST为NULL

搞了一天，现将源码发下

   // 详细信息，请参阅 https://go.microsoft.com/fwlink/?LinkId=317598。
        [HttpPost]
        [ValidateAntiForgeryToken]
		[ValidateInput(false)]
		public async Task<ActionResult> Edit([Bind(Include = "Id,ColumnId,Title,Contents,CreatUser,ReplyID,PcIp,ReplyCount,CmsPermission,UserList,yulou1")] CmsContent cmsContent, FormCollection form)
		{
			//if (Request["ColumnId1"].ToString()!=null)
			//{
			//	cmsContent.ColumnId =int.Parse( Request["ColumnId1"].ToString());

			//}
			//var s = Request["ColumnId1"];
			cmsContent.CreatTime = DateTime.Now;
			var winnars = from x in form.AllKeys        ///选择所有的传进来的form

							  //var winnars = from x in form["selectRole"]
						  where form[x] != "false"

						  select x;

			string Lstring = "";

			//foreach (var id in winnars)
			foreach (var id in winnars)
			{
				if (id!= "Contents"&& id != "ColumnId" && id != "Title"&& id != "Id" && id != "ReplyCount" && id != "CreatUser" && !id.Contains("RequestVerificationToken")) {
				Lstring = Lstring + id + ",";
				}


			}
			cmsContent.CmsPermission = Lstring;
			if (ModelState.IsValid)
            {
                db.Entry(cmsContent).State = EntityState.Modified;
                await db.SaveChangesAsync();
                return RedirectToAction("Index");
            }
            return View(cmsContent);
        }

　　

 

 

 

@model jsdhh2.Models.CmsContent

@{
    ViewBag.Title = "Edit";
}

<h2>Edit</h2>

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()
    
    <div class="form-horizontal">
        <h4>CmsContent</h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        @Html.HiddenFor(model => model.Id)

		<div class="form-group">
			<div class="col-md-2">请选择栏目</div>
			@*@Html.LabelFor("选择栏目", htmlAttributes: new { @class = "control-label col-md-2" })*@
			<div class="col-md-10">
				@Html.DropDownList("ColumnId", new SelectList(ViewBag.drolistmenu, "Value", "Text"), "请选择")

				@Html.ValidationMessageFor(model => model.ColumnId, "", new { @class = "text-danger" })
			</div>
		</div>

      

        <div class="form-group">
			<div class="control-label col-md-2">标题</div>
            <div class="col-md-10">
                @Html.EditorFor(model => model.Title, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Title, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
	
            <div class="col-md-10">
				<div class="control-label col-md-2">请输入内容</div>
			
				@Html.TextAreaFor(model => model.Contents, htmlAttributes: new { @id = "neirong" })
                @*@Html.EditorFor(model => model.Contents, new { htmlAttributes = new { @class = "form-control" } })*@
                @Html.ValidationMessageFor(model => model.Contents, "", new { @class = "text-danger" })
            </div>
        </div>
		
		<div class="form-group">
			<div class="control-label col-md-2">选择阅读权限</div>
			<div class="col-md-10">
				@Html.CheckBox("All", true)全选
				@foreach (var item in (MultiSelectList)ViewBag.rolelist1)
				{
					@*@Html.CheckBox("sefe",item.Value)@item.Value*@

					@Html.CheckBox(@item.Value, false)@item.Value
					@*<input type="checkbox" name="selectRole" value=@item.Value id=@item.Value/>@item.Value*@

				})

				@*@Html.EditorFor(model => model.CmsPermission, new { htmlAttributes = new { @class = "form-control" } })*@
				@Html.ValidationMessageFor(model => model.CmsPermission, "", new { @class = "text-danger" })
			</div>
		</div>


 
		<div style="display:none" >
			@Html.EditorFor(model => model.Id, new { htmlAttributes = new { @class = "form-control" } })
			
			@Html.EditorFor(model => model.ReplyCount, new { htmlAttributes = new { @class = "form-control" } })
            @*@Html.EditorFor(model => model.ColumnId, new { htmlAttributes = new { @class = "form-control" } })*@
			@*@Html.EditorFor(model => model.CmsPermission, new { htmlAttributes = new { @class = "form-control" } })*@
			@Html.EditorFor(model => model.CreatUser, new { htmlAttributes = new { @class = "form-control" } })
			 

		</div>
		     
        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Save" class="btn btn-default" />
            </div>
        </div>
    </div>
}

<div>
    @Html.ActionLink("Back to List", "Index")
</div>
@section Scripts {

	<script type="text/javascript">
var editorOption = {
//initialFrameWidth: 784,
initialFrameHeight: 400
};
var editor = new baidu.editor.ui.Editor(editorOption);
editor.render('neirong');
	</script>


}