技术思绪摘录旅行
如何在.net MVC中优雅的使用Ueditor,很多场景都需要使用编辑器,今天说的是百度的富文本编辑器,强大,功能点多,配置稍微复杂一点点。

本次案例中准备当前页面即展示内容也编辑内容。

首先我们来写控制器里的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中使用百度编辑器!


CarsonIT 微信扫码关注公众号 策略、创意、技术

留下您的脚步

 

最近评论

查看更多>>

精选推荐

阅读排行

友情打赏

请打开您的微信,扫一扫