Ueditor在线编辑及存入数据库

原创 2016年08月30日 21:40:33

     牛腩时对于编辑器的使用只是生搬硬套的使用,但是在真正的项目中真是无从下手的炙热!这次需要对easyui datagrid数据进行添加操作,但是需要对文本进行编辑,

            


需要在线进行编辑,因此Ueditor不可或缺的出现在此!    


     

     出于对编辑器的熟识度不高的认真态度,还是再次学习使用,这就查阅了资料。在线编辑器的网站:http://kindeditor.net/demo.php。但是还需要结合实际项目中。

   首做添加界面的html-AddConventionConfigView:点击Onclick 触发JS 的function AddConvention

<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <script type="text/javascript" charset="utf-8" src="../../ueditor/ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="../../ueditor/ueditor.all.js"></script>
    <!--建议手动加在语言,避免在ie下有时因为加载语言失败导致编辑器加载失败-->
    <!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型,比如你在配置项目里配置的是英文,这里加载的中文,那最后就是中文-->

    <script type="text/javascript" charset="utf-8" src="../../ueditor/lang/zh-cn/zh-cn.js"></script>
    <style type="text/css">
        div {
            width: 100%;
        }
    </style>
</head>
<body>
    <div>
        <div id="titlediv">
            <h1 style="text-align: center;margin-top:10px">
                <span style="font-size: 24px;"><strong>公约标题:</strong></span><strong> </strong><input id="title" type="text" placeholder="请输入公约名称">              
                <a class="easyui-linkbutton" data-options="iconCls:'icon-save'" href="#" style="margin-left:80px; text-align: center;" onclick="AddConvention()">保存</a>
               <a class="easyui-linkbutton" data-options="iconCls:'icon-back'" href="../FreshConfiguration/ConventionConfiguration" style="margin-left: 60px; text-align: center;">返回</a>
            </h1>
        </div>

        @* 编辑器的加载 *@
        <center>
        <script id="editor" type="text/plain" style="width:900px; height:300px;margin-top:15px;" >
           请输入公约内容
        </script>
        </center>
    </div>
</body>
</html>

  

(需要添加下面类似的ViewModel实体)

@model ITOO.Fresh.ViewModel.ConventionViewModel

   需要返回才能实现界面(否则如下红色图)

 public ActionResult AddConventionConfigView() {
            return View();
        }

   

      

    界面加载出来自然需要进行前期简单的设置:

@* 关于公约详情页面的js-赵尽朝-2016年8月16日,此js不能与内容页面分离 *@
<script type="text/javascript">
    $(document).ready(function () {

        ue = UE.getEditor('editor');
        ue.ready(function () {
        })

    })

    function AddConvention() {

        ue = UE.getEditor('editor');
        var content = ue.getContent();
        var title = document.getElementById("title").value;
        var IsUse = "是";

        if ($("#title").val() == "") {
            $.messager.alert('提示', '公约名称不能为空!', 'Info');
            return;
        }

        $.ajax({
            type: "POST",
            url: "/FreshConfiguration/AddConvention",
            data:{ "Content": content,
                "Title": title,
                "IsUse": IsUse,
                
            },
            success: function (data) {
                if (data == true) {
                    $.messager.alert('提醒', '添加成功');    
                }
                else {
                    $.messager.alert('提示', '已存在同名公约,请重新填写!')
                }
            },
            error: function () {
                $.messager.alert('提示',"公约添加失败,请联系管理员");
            }

        })
    }

</script>

 通过Ajax将请求想controler传递需要存储的数据。

   

 #region 添加公约配置信息-AddConvention-赵尽朝-2016年8月5日16:01:47
        [ValidateInput(false)]//这一块也是不太清楚,但是添加 using System.Web.Mvc; 即可
        [HttpPost]
        public ActionResult AddConvention(string Content, string Title, string IsUse)
        {

            List<ConventionViewModel> ConventionViewModel = conventionBll.GetStrConventionno();
            int count = ConventionViewModel.Count() + 1;;
            freshconventionentity Convention = new freshconventionentity();

            Convention.ConventionID = Guid.NewGuid().ToString();//获取ID
            Convention.ConventionName = Title; //获取标题
            Convention.ConventionContent = Content;//获取编辑器中的内容
            Convention.IsUse = 1;
            Convention.conventionSort = count;
            Convention.ConventionTimestamp = DateTime.Parse(DateTime.Now.ToString());
            Convention.isDelete = 0;

            bool data = conventionBll.AddConvention(Convention);//调用B层的添加方法        
            return Json(data, JsonRequestBehavior.AllowGet);
        }
        #endregion

public bool AddConvention(freshconventionentity enFreshConvention)//B 层添加公约的方法
        {
            List<freshconventionentity> list = this.ConventionCurrentDal.LoadItems(p => p.ConventionName == enFreshConvention.ConventionName).ToList();
            if (list.Count() == 0)
            {
                this.ConventionCurrentDal.Add(enFreshConvention);
                this.MyBasedbSession.SaveChanges();
                return true;
            }
            else
            {
                return false;
            }

        }




    存入成功返回true,否则传回false到controler,再通过return Json(data, JsonRequestBehavior.AllowGet);返回到JS中



最后效果图:



版权声明:本文为博主原创文章,未经博主允许不得转载。

Ueditor 前后端数据交互

一、富文本内容交互 1、编辑器内容初始化(即往编辑器中设置富文本) 场景一:写新文章,编辑器中预置提示、问候等内容。 在editor_config.js文件中找到initialC...
  • bobo_93
  • bobo_93
  • 2016年04月06日 23:36
  • 8017

ueditor图片上传,以及图片路径保存进数据库

前段时间一直忙于各种事,今天有点空也不是很困,就来写写文章吧,写的东西如题 那么我就按顺序进行说明一下吧 先废话一句吧,什么ueditor? UEditor是由百度web前端研发部开发所见即所得...

UEditor保存HTML到数据库及回显

//设置根路径 window.UEDITOR_HOME_URL = "${ctx}/js/ueditor/"; $(function(){ var toolbars = [[...

关于百度富文本配置,应用及将其存入数据库

1.去官网下载你所需要的富文本源码! 官网下载地址:http://ueditor.baidu.com/website/download.html 2.将其下载的源码,放入你所应用的项目中。 如下...

ueditor去掉本地保存成功

ueditor.config.js文件中设置enableAutoSave参数为false就可以关闭本地保存功能。  //启用自动保存  ,enableAutoSave: false uedito...

关于ueditor的配置、图片上传、保存数据库、显示等

关于ueditor的配置问题: 平台:windows7 编辑工具:zend studio 服务器:打包的Apache+MySql+php5  1首先说ueditor.config.js...

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

数据库设计问题1-之富文本内容存储到mysql后的读取问题

背景:java web开发+mysql数据库 问题:Incorrect string value: '\xF0\x9F\x91\x8C 解决: 1.将mysql对应的字段设置为utf8mb4...

使用ueditor编辑字体存入数据库,前台没有效果

改变字体大小及颜色,存入数据库后,前台取出显示没有效果,发现是因为默认字体是微软雅黑,给为宋体后,就有效果了,具体原因未知,先记录一下。...

使用ajax保存ueditor中的编辑内容需要转义特殊字符才能进行传参

ajax请求传参时参数中不能包含 ‘’
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Ueditor在线编辑及存入数据库
举报原因:
原因补充:

(最多只允许输入30个字)