本次案例中准备当前页面即展示内容也编辑内容。
首先我们来写控制器里的Action
/// <summary>
/// 在线文本编辑器前台实例
/// </summary>
/// <returns></returns>
[ValidateInput(false)]
public ActionResult Test()
{
//因为前台待会儿是post提交过来的 所以...
if (Request.HttpMethod.Equals("POST", StringComparison.OrdinalIgnoreCase))
{
string str = HttpUtility.HtmlEncode(Request.Form["Editor1"]);
About_AboutListService.GetInstance().Save(1, str);//写入数据库
}
About_AboutListInfo item = About_AboutListService.GetInstance().GetEntity(1);//读取数据
ViewBag.con = item.Contents;
return View();
}就是这么几句后台代码完成，因为展示和编辑都是同一个视图，所以读取的代码写一次即可，不用Post一次 Get一次了。最后返回视图。
接下来是前台视图代码:
@{
ViewBag.Title = "编辑器案例";
Layout = "~/Views/Shared/_Layout_Share.cshtml";
}
@section HeaderQuote {
//这里是专门写样式或者引用样式区域
<link href="~/Scripts/ueditor/themes/default/css/ueditor.min.css" rel="stylesheet" />
}
@section content {
<!--这是展示数据库读取的数据内容 入库和显示有编码操作-->
<div class="container bg-success">
@Html.Raw(HttpUtility.HtmlDecode(ViewBag.con))
</div>
<!--这里是一个表单 提交到当前的Test视图-->
@using (Html.BeginForm("Test", "Home", FormMethod.Post, new { id = "" }))
{
<div class="container p0" id="box">
<script type="text/plain" name="Editor1" id="Editor1">
@Html.Raw(HttpUtility.HtmlDecode(ViewBag.con))
</script>
<input type="submit" value="提交数据" class="btn btn-success btn-lg f14 mt20" />
</div>
}
}
@section FooterQuote {
//此处是页脚 我专门用来放js代码
<script type="text/javascript">
window.UMEDITOR_HOME_URL = '@Server.MapPath("/Scripts/ueditor/")';
</script>
<script type="text/javascript" src="~/Scripts/js/jquery.min.js"></script>
<script type="text/javascript" src="~/Scripts/ueditor/ueditor.config.js"></script>
<script type="text/javascript" src="~/Scripts/ueditor/ueditor.all.min.js"></script>
<script type="text/javascript">
var editor;
$(function () {
// 初始化
editor = UE.getEditor('Editor1', {
elementPathEnabled: false,
enableAutoSave: false,
initialFrameWidth: '100%',
initialFrameHeight: 400,
autoHeightEnabled: true,
autoFloatEnabled: false
});
});
</script>
}注意：给编辑器加载初始内容和展示数据是一样的，如果利用编辑器提供的初始化API的话，首先@符号在视图里就有冲突，这里不解释，自己体会。初始化编辑器就几句代码，这是我见过最简单的MVC中使用百度编辑器！
川公网安备 51010702003150号
留下您的脚步
最近评论