devbox
小蓝xlanll
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

【ASP.NET】5.百度富文本编辑器UEditor之存入数据库_ueditor内容保存到数据库

作者：小蓝xlanll | 2024-03-13 20:09:35

赞

踩

ueditor内容保存到数据库

 最近项目要实现一个新闻发布的功能，要实现图文混排存储入数据库，再取出来进行页面展示的效果，于是网上搜了一个资料，在这里做一下总结，百度富文本编辑器有Java，php，.net三个版本，这里我下载的.net版本的，下载地址：http://ueditor.baidu.com/website/download.html

1、下载后要先看一下ueditor.config.js和asp/config.json的文件，里面是关于图片上传和其他方法的一些路径配置：

ueditor.config.js文件：


上传图片路径的配置文件asp/config.json

2、显示编辑页面（一定要看使用文档：http://fex.baidu.com/ueditor/#server-deploy）

（1）引入所需要的js文件

  1.     <script type="text/javascript" charset="utf-8" src="ueditor.config.js"></script>
  2.     <script type="text/javascript" charset="utf-8" src="ueditor.all.js"> </script>
  3.     <!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
  4.     <!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
  5.     <script type="text/javascript" charset="utf-8" src="lang/zh-cn/zh-cn.js"></script>
（2）初始化编辑器，html代码： 

  1.                 <div>
  2.                     <textarea class="A4page" id="myEditor" name="NewsContent"></textarea>
  3.                 </div>
JavaScript代码： 

  1.                 <!-- 实例化编辑器 -->
  2.                 <script type="text/javascript">
  3.                     var ue = UE.getEditor('myEditor', {
  4.                         toolbars: [
  5.                             ['fullscreen', 'source', '|', 'undo', 'redo', '|',
  6.                         'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|',
  7.                         'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
  8.                         'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
  9.                         'directionalityltr', 'directionalityrtl', 'indent', '|',
  10.                         'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|',
  11.                         'link', 'unlink', 'anchor', '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|',
  12.                         'simpleupload', 'insertimage', 'emotion', 'scrawl', 'insertframe', 'insertcode', 'pagebreak', 'template', 'background', '|',
  13.                         'horizontal', 'date', 'time', 'spechars', 'snapscreen', 'wordimage', '|',
  14.                         'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols', 'charts', '|',
  15.                         'print', 'preview', 'searchreplace', 'help', 'drafts']
  16.                         ],
  17.                         allHtmlEnabled: false,//提交到后台的数据是否包含整个html字符串
  18.                         autoHeightEnabled: false,
  19.                         autoFloatEnabled: true,
  20.                         allowDivTransToP: false//阻止div标签自动转换为p标签
  21.                     });
  22.  
  23.                 </script>
说明修改配置项的方法：

方法一：修改ueditor.config.js里面的toolbars

方法二：实例化编辑器的时候传入toolbars参数（详情参考：http://fex.baidu.com/ueditor/#start-toolbar）

3、前端配置基本上配置好了，下面是后端配置（如果后端配置不好，上传图片功能将无法使用），在提交内容的时候我也遇到了一个坑了我一天的问题，由于是.NET的WinForm，点击按钮提交的时候，页面会整个刷新，所以富文本框内输入的值，由于页面的刷新传入后端的会是空值，我这里解决的方法是把富文本编辑器的赋值语句写到一个js的方法里面，然后把值存到一个隐藏域里面，把提交按钮放到UpdatePanel里面，只刷新按钮，不刷新页面其他部分，点击按钮执行提交之前，先执行这个js方法，取到富文本编辑器里面的值以后再执行存储数据库的操作，具体代码如下：

news_publish.aspx

  1. <%@ Page ValidateRequest="false" Title="新闻发布" Language="C#" MasterPageFile="~/LJMB/MB01/MP01.master" AutoEventWireup="true" CodeFile="news_publish.aspx.cs" Inherits="LJWY_MG00_news_publish" %>
  2.  
  3. <asp:Content ID="Content1" ContentPlaceHolderID="cphBody" runat="Server">
  4.     <script type="text/javascript" charset="utf-8" src="ueditor.config.js"></script>
  5.     <script type="text/javascript" charset="utf-8" src="ueditor.all.js"> </script>
  6.     <!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
  7.     <!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
  8.     <script type="text/javascript" charset="utf-8" src="lang/zh-cn/zh-cn.js"></script>
  9.     <div class="divPaH010"></div>
  10.     <%--2. 组合页面按钮--%>
  11.     <div class="divPaW080"></div>
  12.  
  13.  
  14.     <%--</div>--%>
  15.     <%--3. 组合数据控件--%>
  16.     <div class="divPaH010"></div>
  17.     <div class="divMpP302_1">
  18.         <div class="divPaH020"></div>
  19.         <div class="divPaH020">
  20.             <div class="divPaW080">
  21.                 <asp:Label ID="lblCTOW" runat="server" CssClass="lbtMpL306" Text="新闻标题："></asp:Label></div>
  22.             <div class="divPaW120_1">
  23.                 <asp:TextBox ID="txtCTOW" runat="server" CssClass="txtMpL301_1" οnmοuseοver="className='txtMpL302_1'" οnmοuseοut="className='txtMpL301_1'"> </asp:TextBox></div>
  24.             <div class="divPaW080">
  25.                 <asp:Label ID="lblCTY2" runat="server" CssClass="lbtMpL306" Text="新闻类别："></asp:Label></div>
  26.             <div class="divPaW120">
  27.                 <asp:DropDownList ID="ddlCTY2" runat="server" CssClass="txtMpL301"></asp:DropDownList></div>
  28.             <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
  29.             <asp:UpdatePanel ID="UpdatePanel1" runat="server">
  30.                 <ContentTemplate>
  31.                     <div class="divPaW080_1"><asp:LinkButton ID="btnQuery"	runat="server" Text="发布" CssClass="lbtMpL305" CommandName="Save" οnmοuseοver="setover(this)" οnmοuseοut="setout(this)" OnClick="btnEvent_Click"></asp:LinkButton></div>
  32. 		            <%--<div class="divPaW080"><asp:LinkButton ID="btnReset"	runat="server" Text="重设" CssClass="lbtMpL305" CommandName="Reset" οnmοuseοver="setover(this)" οnmοuseοut="setout(this)" OnClick="btnEvent_Click"></asp:LinkButton></div>--%>
  33.                     <asp:Label ID="lblWarning" runat="server" CssClass="lblWarning"></asp:Label>
  34.                 </ContentTemplate>
  35.             </asp:UpdatePanel>
  36.  
  37.         </div>
  38.         <div class="divPaH020"></div>
  39.         <div class="divPaH020">
  40.             <%--<div class="divPaW080"><asp:Label ID="lblCTDS" runat="server" CssClass="lbtMpL306" Text="新闻内容"></asp:Label></div><div class="divPaW120"><asp:TextBox ID="txtCITX" TextMode="MultiLine" runat="server" CssClass="txtMpL3011"  οnmοuseοver="className='txtMpL3021'" οnmοuseοut="className='txtMpL3011'"> </asp:TextBox></div>	--%>
  41.             <div style="margin: 0 auto;">
  42.                 <div>
  43.                     <textarea class="A4page" id="myEditor" name="NewsContent"></textarea>
  44.                 </div>
  45.                 <asp:HiddenField ID="HiddenField1" runat="server" />
  46.                 <!-- 实例化编辑器 -->
  47.                 <script type="text/javascript">
  48.                     var ue = UE.getEditor('myEditor', {
  49.                         toolbars: [
  50.                             ['fullscreen', 'source', '|', 'undo', 'redo', '|',
  51.                         'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|',
  52.                         'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
  53.                         'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
  54.                         'directionalityltr', 'directionalityrtl', 'indent', '|',
  55.                         'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|',
  56.                         'link', 'unlink', 'anchor', '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|',
  57.                         'simpleupload', 'insertimage', 'emotion', 'scrawl', 'insertframe', 'insertcode', 'pagebreak', 'template', 'background', '|',
  58.                         'horizontal', 'date', 'time', 'spechars', 'snapscreen', 'wordimage', '|',
  59.                         'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols', 'charts', '|',
  60.                         'print', 'preview', 'searchreplace', 'help', 'drafts']
  61.                         ],
  62.                         allHtmlEnabled: false,//提交到后台的数据是否包含整个html字符串
  63.                         autoHeightEnabled: false,
  64.                         autoFloatEnabled: true,
  65.                         allowDivTransToP: false//阻止div标签自动转换为p标签
  66.                     });
  67.                     function UserAddVerify() {
  68.                         ue.ready(function () {
  69.                             var html = ue.getContent();
  70.                             document.getElementById("<%=HiddenField1.ClientID %>").value = html;
  71.                 console.log(html);
  72.             });
  73.         }
  74.  
  75.                 </script>
  76.             </div>
  77.  
  78.  
  79.         </div>
  80.     </div>
  81.  
  82. </asp:Content>
  83.
news_publish.aspx.cs 

  1.     #region 2. 页面加载
  2.     /// <summary>
  3.     /// 页面加载事件
  4.     /// </summary>
  5.     /// <param name="sender"></param>
  6.     /// <param name="e"></param>
  7.     protected void Page_Load(object sender, EventArgs e)
  8.     {
  9.         if (!IsPostBack)
  10.         {
  11.             //给btnQuery添加客户端事件  
  12.             btnQuery.Attributes.Add("OnClick", "return UserAddVerify()");
  13.  
  14.             //设置菜单编号
  15.             pgMenuId = "401101";
  16.  
  17.             PgFnInitial();
  18.         }
  19.     }
  20.     #endregion //2. 页面加载
  21.     #region  3. 页面事件
  22.  
  23.     #region 3.1 按钮事件
  24.     /// <summary>
  25.     /// 按钮事件
  26.     /// </summary>
  27.     /// <param name="sender"></param>
  28.     /// <param name="e"></param>
  29.     protected void btnEvent_Click(object sender, EventArgs e)
  30.     {
  31.         #region 得到事件类别
  32.         string strCMNA = "";
  33.         strCMNA = ((LinkButton)(sender)).CommandName.ToString();
  34.         #endregion 得到事件类别
  35.  
  36.         #region 保存按钮事件
  37.         if (strCMNA == "Save")
  38.         {
  39.  
  40.             #region 变量定义
  41.             string strTableName = "OC11HN";
  42.             ArrayList aryInsertFiled = new ArrayList();
  43.             ArrayList aryInsertValues = new ArrayList();
  44.             string strTableNamehd = "OC11DB";
  45.             ArrayList aryInsertFiledhd = new ArrayList();
  46.             ArrayList aryInsertValueshd = new ArrayList();
  47.             string strSYID = "";
  48.             string strCTID = "";
  49.             string strCTNA = "";
  50.             string strCTFG = "";
  51.             string strCTTY = "";
  52.             string strCTY1 = "";
  53.             string strCTY2 = "";
  54.             string strCTDT = "";
  55.             string strPBTM = "";
  56.             string strCTOW = "";
  57.             string strATFG = "";
  58.             string strCTIT = "";
  59.             string strCIFG = "";
  60.             string strCITX = "";
  61.  
  62.             #endregion //变量定义
  63.  
  64.             #region 变量赋值
  65.             strSYID = "FRPL";
  66.             strCTID = objDrFn.GetFlowNo("FRPL", "XWGL", "XWID");
  67.             strCTNA = "二级页面";
  68.             strCTFG = "Y";
  69.             strCTTY = "精彩剪影";
  70.             strCTY1 = "精彩剪影";
  71.             strCTY2 = ddlCTY2.SelectedValue.ToString().Trim();
  72.             strCTDT = DateTime.Now.ToString("yyyyMMdd");
  73.             strPBTM = DateTime.Now.ToString("yyyy-MM-dd");
  74.             strATFG = "Y";
  75.             strCTOW = txtCTOW.Text.ToString().Trim();
  76.             strATFG = "Y";
  77.             strCTIT = "001";
  78.             strCIFG = "Y";
  79.             //strCITX = hidInput.Value;
  80.             strCITX = HiddenField1.Value;
  81.  
  82.             #endregion //变量赋值
  83.  
  84.             #region 变量处理
  85.             strSYID = objDrFn.FmatStr(strSYID);
  86.             strCTID = objDrFn.FmatStr(strCTID);
  87.             strCTNA = objDrFn.FmatStr(strCTNA);
  88.             strCTFG = objDrFn.FmatStr(strCTFG);
  89.             strCTTY = objDrFn.FmatStr(strCTTY);
  90.             strCTY1 = objDrFn.FmatStr(strCTY1);
  91.             strCTY2 = objDrFn.FmatStr(strCTY2);
  92.             strATFG = objDrFn.FmatStr(strATFG);
  93.             strCTDT = objDrFn.FmatStr(strCTDT);
  94.             strPBTM = objDrFn.FmatStr(strPBTM);
  95.             strCTOW = objDrFn.FmatStr(strCTOW);
  96.             strATFG = objDrFn.FmatStr(strATFG);
  97.             strCTIT = objDrFn.FmatStr(strCTIT);
  98.             strCIFG = objDrFn.FmatStr(strCIFG);
  99.             strCITX = objDrFn.FmatStr(strCITX);
  100.  
  101.             #endregion //变量处理
  102.  
  103.             #region 变量验证
  104.  
  105.             #region 非空验证
  106.             //主键的非空验证
  107.             if (strCTOW == "")
  108.             {
  109.                 lblWarning.Text = "新闻标题 不允许为空！";
  110.                 return;
  111.             }
  112.             #endregion //非空验证
  113.  
  114.             #region 整型验证
  115.             //if (!objDsFt.CheckInt(变量名))
  116.             //{
  117.             //	lblWarning.Text = "变量名 必须是整型数据";
  118.             //	return;
  119.             //}
  120.             #endregion //整型验证
  121.  
  122.             #region 浮点验证
  123.             //if (!objDsFt.CheckDeciaml(变量名))
  124.             //{
  125.             //	lblWarning.Text = "变量名 必须是数值型数据";
  126.             //	return;
  127.             //}
  128.             #endregion //浮点验证
  129.  
  130.             #region 逻辑验证
  131.             //string strFileAllPath = fileUplod.PostedFile.FileName.ToString().Trim();
  132.  
  133.             //if (strFileAllPath != "")
  134.             //{
  135.             //    string strSavePath = DsCg.GetUploadPath(Page) + "CPTP\\";
  136.             //    string strFileName = strURID;// objDsnf.GetFileName(strFileAllPath);
  137.             //    string strFileExName = objDsFt.GetFileExName(strFileAllPath).ToUpper();
  138.  
  139.             //    if ((strFileExName != "JPG") && (strFileExName != "PNG"))
  140.             //    {
  141.             //        ClientScript.RegisterStartupScript(typeof(string), "alert", "<script>alert('员工头像只支持JPG、PNG图片，请选择正确的图片！')</script>");
  142.             //        return;
  143.             //    }
  144.  
  145.             //    string strTime = DateTime.Now.ToString("yyyyMMddHHmmss");
  146.  
  147.             //    string strFileNewName = strSavePath + strFileName + "" + strTime + "." + strFileExName;
  148.  
  149.             //    fileUplod.PostedFile.SaveAs(strFileNewName);
  150.  
  151.             //    strURPC = "../../LJSC/CPTP/" + strFileName + "" + strTime + "." + strFileExName;
  152.  
  153.  
  154.             //}
  155.             //if (string.IsNullOrEmpty(strURPC))
  156.             //{
  157.             //    strURPC = "../../LJTP/default.jpg";
  158.             //}
  159.             #endregion //逻辑验证
  160.  
  161.             #region 主键验证
  162.             #endregion //主键验证
  163.  
  164.             #endregion //变量验证
  165.  
  166.             #region 变量组合
  167.             aryInsertFiled.Add("SYID");
  168.             aryInsertFiled.Add("CTID");
  169.             aryInsertFiled.Add("CTNA");
  170.             aryInsertFiled.Add("CTFG");
  171.             aryInsertFiled.Add("CTTY");
  172.             aryInsertFiled.Add("CTY1");
  173.             aryInsertFiled.Add("CTY2");
  174.             aryInsertFiled.Add("CTDT");
  175.             aryInsertFiled.Add("PBTM");
  176.             aryInsertFiled.Add("CTOW");
  177.             aryInsertFiled.Add("ATFG");
  178.  
  179.  
  180.             aryInsertValues.Add(strSYID);
  181.             aryInsertValues.Add(strCTID);
  182.             aryInsertValues.Add(strCTNA);
  183.             aryInsertValues.Add(strCTFG);
  184.             aryInsertValues.Add(strCTTY);
  185.             aryInsertValues.Add(strCTY1);
  186.             aryInsertValues.Add(strCTY2);
  187.             aryInsertValues.Add(strCTDT);
  188.             aryInsertValues.Add(strPBTM);
  189.             aryInsertValues.Add(strCTOW);
  190.             aryInsertValues.Add(strATFG);
  191.  
  192.             aryInsertFiledhd.Add("SYID");
  193.             aryInsertFiledhd.Add("CTID");
  194.             aryInsertFiledhd.Add("CTIT");
  195.             aryInsertFiledhd.Add("CIFG");
  196.             aryInsertFiledhd.Add("CITX");
  197.  
  198.             aryInsertValueshd.Add(strSYID);
  199.             aryInsertValueshd.Add(strCTID);
  200.             aryInsertValueshd.Add(strCTIT);
  201.             aryInsertValueshd.Add(strCIFG);
  202.             aryInsertValueshd.Add(strCITX);
  203.  
  204.  
  205.             #endregion //变量组合
  206.  
  207.             #region 执行保存
  208.             bool bolIfOk = objDrFn.InsertRecode(strTableName, aryInsertFiled, aryInsertValues);
  209.             bool bolIfOkhd = objDrFn.InsertRecode(strTableNamehd, aryInsertFiledhd, aryInsertValueshd);
  210.             #endregion //执行保存
  211.  
  212.             #region 判断结果
  213.             if (!(bolIfOk))
  214.             {
  215.                 lblWarning.Text = "数据保存失败!";
  216.                 return;
  217.             }
  218.             #endregion //判断结果
  219.  
  220.             #region 显示结果
  221.             //设置保存成功的数据
  222.  
  223.             lblWarning.Text = "数据信息保存成功！";
  224.             //PgFnInitial();
  225.             objDrFn.UpdateMaxFlowNo("FRPL", "XWGL", "XWID");
  226.             //DataTable dt = objDrFn.GetDataTable("SELECT * FROM OC11HN WHERE CTID='" + strCTID + "'");
  227.  
  228.             //gvMain.DataSource = dt;
  229.             //gvMain.DataBind();
  230.  
  231.  
  232.             #endregion //显示结果
  233.         }
  234.         #endregion //保存按钮事件
  235.  
  236.         #region 重设按钮事件
  237.         else if (strCMNA == "Reset")
  238.         {
  239.             PgFnInitial();
  240.         }
  241.         #endregion //重设按钮事件
  242.  
  243.     }
  244.     #endregion //3.1 按钮事件
  245.     #region 4. 页面函数
  246.  
  247.     #region 4.1 控件数据设置
  248.     /// <summary>
  249.     /// 控件数据设置
  250.     /// </summary>
  251.     private void PgFnInitial()
  252.     {
  253.         #region 验证用户权限
  254.         //PgFnValUserAur();
  255.         #endregion //验证用户权限
  256.  
  257.         #region Set Nomal Component
  258.         //gvMain.DataSource = null;
  259.         //gvMain.DataBind();
  260.         #endregion //Set Nomal Component
  261.  
  262.         //初始化页面控件
  263.  
  264.         //初始化页面控件
  265.         txtCTOW.Text = "";
  266.         //txtCITX.Text = "";
  267.  
  268.         objDrFn.SetDdl(ddlCTY2, "FRPL", "XWTP", "CLNA", "CLTX");
  269.  
  270.     }
  271.     #endregion //4.1 控件数据设置
页面效果如图所示：

会以html的形式存入数据库，如下图所示：






声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小蓝xlanll/article/detail/230341?site
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号