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

小咪咪 2022-05-31 00:53 493阅读 0赞

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

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

ueditor.config.js文件：

![SouthEast][]

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

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

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

（2）初始化编辑器，html代码：

JavaScript代码：

<script type="text/javascript">
                        var ue = UE.getEditor('myEditor', {
                            toolbars: [
                                ['fullscreen', 'source', '|', 'undo', 'redo', '|',
                            'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|',
                            'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
                            'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
                            'directionalityltr', 'directionalityrtl', 'indent', '|',
                            'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|',
                            'link', 'unlink', 'anchor', '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|',
                            'simpleupload', 'insertimage', 'emotion', 'scrawl', 'insertframe', 'insertcode', 'pagebreak', 'template', 'background', '|',
                            'horizontal', 'date', 'time', 'spechars', 'snapscreen', 'wordimage', '|',
                            'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols', 'charts', '|',
                            'print', 'preview', 'searchreplace', 'help', 'drafts']
                            ],
                            allHtmlEnabled: false,//提交到后台的数据是否包含整个html字符串
                            autoHeightEnabled: false,
                            autoFloatEnabled: true,
                            allowDivTransToP: false//阻止div标签自动转换为p标签
                        });
    
                    </script>

说明修改配置项的方法：

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

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

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

news\_publish.aspx

<%@ Page ValidateRequest="false" Title="新闻发布" Language="C#" MasterPageFile="~/LJMB/MB01/MP01.master" AutoEventWireup="true" CodeFile="news_publish.aspx.cs" Inherits="LJWY_MG00_news_publish" %>
    
    <asp:Content ID="Content1" ContentPlaceHolderID="cphBody" runat="Server">
        <script type="text/javascript" charset="utf-8" src="ueditor.config.js"></script>
        <script type="text/javascript" charset="utf-8" src="ueditor.all.js"> </script>
        
        
        <script type="text/javascript" charset="utf-8" src="lang/zh-cn/zh-cn.js"></script>
        <div class="divPaH010"></div>
        <%--2. 组合页面按钮--%>
        <div class="divPaW080"></div>
    
    
        <%--</div>--%>
        <%--3. 组合数据控件--%>
        <div class="divPaH010"></div>
        <div class="divMpP302_1">
            <div class="divPaH020"></div>
            <div class="divPaH020">
                <div class="divPaW080">
                    <asp:Label ID="lblCTOW" runat="server" CssClass="lbtMpL306" Text="新闻标题："></asp:Label></div>
                <div class="divPaW120_1">
                    <asp:TextBox ID="txtCTOW" runat="server" CssClass="txtMpL301_1" οnmοuseοver="className='txtMpL302_1'" οnmοuseοut="className='txtMpL301_1'"> </asp:TextBox></div>
                <div class="divPaW080">
                    <asp:Label ID="lblCTY2" runat="server" CssClass="lbtMpL306" Text="新闻类别："></asp:Label></div>
                <div class="divPaW120">
                    <asp:DropDownList ID="ddlCTY2" runat="server" CssClass="txtMpL301"></asp:DropDownList></div>
                <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
                <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                    <ContentTemplate>
                        <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>
    		            <%--<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>--%>
                        <asp:Label ID="lblWarning" runat="server" CssClass="lblWarning"></asp:Label>
                    </ContentTemplate>
                </asp:UpdatePanel>
    
            </div>
            <div class="divPaH020"></div>
            <div class="divPaH020">
                <%--<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>	--%>
                <div style="margin: 0 auto;">
                    <div>
                        <textarea class="A4page" id="myEditor" name="NewsContent"></textarea>
                    </div>
                    <asp:HiddenField ID="HiddenField1" runat="server" />
                    
                    <script type="text/javascript">
                        var ue = UE.getEditor('myEditor', {
                            toolbars: [
                                ['fullscreen', 'source', '|', 'undo', 'redo', '|',
                            'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|',
                            'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
                            'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
                            'directionalityltr', 'directionalityrtl', 'indent', '|',
                            'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|',
                            'link', 'unlink', 'anchor', '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|',
                            'simpleupload', 'insertimage', 'emotion', 'scrawl', 'insertframe', 'insertcode', 'pagebreak', 'template', 'background', '|',
                            'horizontal', 'date', 'time', 'spechars', 'snapscreen', 'wordimage', '|',
                            'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols', 'charts', '|',
                            'print', 'preview', 'searchreplace', 'help', 'drafts']
                            ],
                            allHtmlEnabled: false,//提交到后台的数据是否包含整个html字符串
                            autoHeightEnabled: false,
                            autoFloatEnabled: true,
                            allowDivTransToP: false//阻止div标签自动转换为p标签
                        });
                        function UserAddVerify() {
                            ue.ready(function () {
                                var html = ue.getContent();
                                document.getElementById("<%=HiddenField1.ClientID %>").value = html;
                    console.log(html);
                });
            }
    
                    </script>
                </div>
    
    
            </div>
        </div>
    
    </asp:Content>

news\_publish.aspx.cs

#region 2. 页面加载
        /// <summary>
        /// 页面加载事件
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                //给btnQuery添加客户端事件  
                btnQuery.Attributes.Add("OnClick", "return UserAddVerify()");
    
                //设置菜单编号
                pgMenuId = "401101";
    
                PgFnInitial();
            }
        }
        #endregion //2. 页面加载
        #region  3. 页面事件
    
        #region 3.1 按钮事件
        /// <summary>
        /// 按钮事件
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        protected void btnEvent_Click(object sender, EventArgs e)
        {
            #region 得到事件类别
            string strCMNA = "";
            strCMNA = ((LinkButton)(sender)).CommandName.ToString();
            #endregion 得到事件类别
    
            #region 保存按钮事件
            if (strCMNA == "Save")
            {
    
                #region 变量定义
                string strTableName = "OC11HN";
                ArrayList aryInsertFiled = new ArrayList();
                ArrayList aryInsertValues = new ArrayList();
                string strTableNamehd = "OC11DB";
                ArrayList aryInsertFiledhd = new ArrayList();
                ArrayList aryInsertValueshd = new ArrayList();
                string strSYID = "";
                string strCTID = "";
                string strCTNA = "";
                string strCTFG = "";
                string strCTTY = "";
                string strCTY1 = "";
                string strCTY2 = "";
                string strCTDT = "";
                string strPBTM = "";
                string strCTOW = "";
                string strATFG = "";
                string strCTIT = "";
                string strCIFG = "";
                string strCITX = "";
    
                #endregion //变量定义
    
                #region 变量赋值
                strSYID = "FRPL";
                strCTID = objDrFn.GetFlowNo("FRPL", "XWGL", "XWID");
                strCTNA = "二级页面";
                strCTFG = "Y";
                strCTTY = "精彩剪影";
                strCTY1 = "精彩剪影";
                strCTY2 = ddlCTY2.SelectedValue.ToString().Trim();
                strCTDT = DateTime.Now.ToString("yyyyMMdd");
                strPBTM = DateTime.Now.ToString("yyyy-MM-dd");
                strATFG = "Y";
                strCTOW = txtCTOW.Text.ToString().Trim();
                strATFG = "Y";
                strCTIT = "001";
                strCIFG = "Y";
                //strCITX = hidInput.Value;
                strCITX = HiddenField1.Value;
    
                #endregion //变量赋值
    
                #region 变量处理
                strSYID = objDrFn.FmatStr(strSYID);
                strCTID = objDrFn.FmatStr(strCTID);
                strCTNA = objDrFn.FmatStr(strCTNA);
                strCTFG = objDrFn.FmatStr(strCTFG);
                strCTTY = objDrFn.FmatStr(strCTTY);
                strCTY1 = objDrFn.FmatStr(strCTY1);
                strCTY2 = objDrFn.FmatStr(strCTY2);
                strATFG = objDrFn.FmatStr(strATFG);
                strCTDT = objDrFn.FmatStr(strCTDT);
                strPBTM = objDrFn.FmatStr(strPBTM);
                strCTOW = objDrFn.FmatStr(strCTOW);
                strATFG = objDrFn.FmatStr(strATFG);
                strCTIT = objDrFn.FmatStr(strCTIT);
                strCIFG = objDrFn.FmatStr(strCIFG);
                strCITX = objDrFn.FmatStr(strCITX);
    
                #endregion //变量处理
    
                #region 变量验证
    
                #region 非空验证
                //主键的非空验证
                if (strCTOW == "")
                {
                    lblWarning.Text = "新闻标题 不允许为空！";
                    return;
                }
                #endregion //非空验证
    
                #region 整型验证
                //if (!objDsFt.CheckInt(变量名))
                //{
                //	lblWarning.Text = "变量名 必须是整型数据";
                //	return;
                //}
                #endregion //整型验证
    
                #region 浮点验证
                //if (!objDsFt.CheckDeciaml(变量名))
                //{
                //	lblWarning.Text = "变量名 必须是数值型数据";
                //	return;
                //}
                #endregion //浮点验证
    
                #region 逻辑验证
                //string strFileAllPath = fileUplod.PostedFile.FileName.ToString().Trim();
    
                //if (strFileAllPath != "")
                //{
                //    string strSavePath = DsCg.GetUploadPath(Page) + "CPTP\\";
                //    string strFileName = strURID;// objDsnf.GetFileName(strFileAllPath);
                //    string strFileExName = objDsFt.GetFileExName(strFileAllPath).ToUpper();
    
                //    if ((strFileExName != "JPG") && (strFileExName != "PNG"))
                //    {
                //        ClientScript.RegisterStartupScript(typeof(string), "alert", "<script>alert('员工头像只支持JPG、PNG图片，请选择正确的图片！')</script>");
                //        return;
                //    }
    
                //    string strTime = DateTime.Now.ToString("yyyyMMddHHmmss");
    
                //    string strFileNewName = strSavePath + strFileName + "" + strTime + "." + strFileExName;
    
                //    fileUplod.PostedFile.SaveAs(strFileNewName);
    
                //    strURPC = "../../LJSC/CPTP/" + strFileName + "" + strTime + "." + strFileExName;
    
    
                //}
                //if (string.IsNullOrEmpty(strURPC))
                //{
                //    strURPC = "../../LJTP/default.jpg";
                //}
                #endregion //逻辑验证
    
                #region 主键验证
                #endregion //主键验证
    
                #endregion //变量验证
    
                #region 变量组合
                aryInsertFiled.Add("SYID");
                aryInsertFiled.Add("CTID");
                aryInsertFiled.Add("CTNA");
                aryInsertFiled.Add("CTFG");
                aryInsertFiled.Add("CTTY");
                aryInsertFiled.Add("CTY1");
                aryInsertFiled.Add("CTY2");
                aryInsertFiled.Add("CTDT");
                aryInsertFiled.Add("PBTM");
                aryInsertFiled.Add("CTOW");
                aryInsertFiled.Add("ATFG");
    
    
                aryInsertValues.Add(strSYID);
                aryInsertValues.Add(strCTID);
                aryInsertValues.Add(strCTNA);
                aryInsertValues.Add(strCTFG);
                aryInsertValues.Add(strCTTY);
                aryInsertValues.Add(strCTY1);
                aryInsertValues.Add(strCTY2);
                aryInsertValues.Add(strCTDT);
                aryInsertValues.Add(strPBTM);
                aryInsertValues.Add(strCTOW);
                aryInsertValues.Add(strATFG);
    
                aryInsertFiledhd.Add("SYID");
                aryInsertFiledhd.Add("CTID");
                aryInsertFiledhd.Add("CTIT");
                aryInsertFiledhd.Add("CIFG");
                aryInsertFiledhd.Add("CITX");
    
                aryInsertValueshd.Add(strSYID);
                aryInsertValueshd.Add(strCTID);
                aryInsertValueshd.Add(strCTIT);
                aryInsertValueshd.Add(strCIFG);
                aryInsertValueshd.Add(strCITX);
    
    
                #endregion //变量组合
    
                #region 执行保存
                bool bolIfOk = objDrFn.InsertRecode(strTableName, aryInsertFiled, aryInsertValues);
                bool bolIfOkhd = objDrFn.InsertRecode(strTableNamehd, aryInsertFiledhd, aryInsertValueshd);
                #endregion //执行保存
    
                #region 判断结果
                if (!(bolIfOk))
                {
                    lblWarning.Text = "数据保存失败!";
                    return;
                }
                #endregion //判断结果
    
                #region 显示结果
                //设置保存成功的数据
    
                lblWarning.Text = "数据信息保存成功！";
                //PgFnInitial();
                objDrFn.UpdateMaxFlowNo("FRPL", "XWGL", "XWID");
                //DataTable dt = objDrFn.GetDataTable("SELECT * FROM OC11HN WHERE CTID='" + strCTID + "'");
    
                //gvMain.DataSource = dt;
                //gvMain.DataBind();
    
    
                #endregion //显示结果
            }
            #endregion //保存按钮事件
    
            #region 重设按钮事件
            else if (strCMNA == "Reset")
            {
                PgFnInitial();
            }
            #endregion //重设按钮事件
    
        }
        #endregion //3.1 按钮事件
        #region 4. 页面函数
    
        #region 4.1 控件数据设置
        /// <summary>
        /// 控件数据设置
        /// </summary>
        private void PgFnInitial()
        {
            #region 验证用户权限
            //PgFnValUserAur();
            #endregion //验证用户权限
    
            #region Set Nomal Component
            //gvMain.DataSource = null;
            //gvMain.DataBind();
            #endregion //Set Nomal Component
    
            //初始化页面控件
    
            //初始化页面控件
            txtCTOW.Text = "";
            //txtCITX.Text = "";
    
            objDrFn.SetDdl(ddlCTY2, "FRPL", "XWTP", "CLNA", "CLTX");
    
        }
        #endregion //4.1 控件数据设置

页面效果如图所示：  
![SouthEast 2][]  
会以html的形式存入数据库，如下图所示：

![SouthEast 3][]

[http_ueditor.baidu.com_website_download.html]: http://ueditor.baidu.com/website/download.html
[SouthEast]: /images/20220531/ededc8d0465f4ca38f61a75d2b3c6f93.png
[SouthEast 1]: /images/20220531/08a4b201ce644f7188152d16643f6eb2.png
[SouthEast 2]: /images/20220531/3886cb1913154d1fa413156abc3b5c82.png
[SouthEast 3]: /images/20220531/334c51722e7b4f4b9ecd913f5efd8016.png