欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-05-24 20:35:52
...

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

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

ueditor.config.js文件:

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

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

【ASP.NET】5.百度富文本编辑器UEditor之存入数据库2、显示编辑页面(一定要看使用文档:http://fex.baidu.com/ueditor/#server-deploy)

(1)引入所需要的js文件

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

                <div>
                    <textarea class="A4page" id="myEditor" name="NewsContent"></textarea>
                </div>
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>
    <!--建议手动加在语言,避免在ie下有时因为加载语言失败导致编辑器加载失败-->
    <!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型,比如你在配置项目里配置的是英文,这里加载的中文,那最后就是中文-->
    <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" onmouseover="className='txtMpL302_1'" onmouseout="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" onmouseover="setover(this)" onmouseout="setout(this)" OnClick="btnEvent_Click"></asp:LinkButton></div>
		            <%--<div class="divPaW080"><asp:LinkButton ID="btnReset"	runat="server" Text="重设" CssClass="lbtMpL305" CommandName="Reset" onmouseover="setover(this)" onmouseout="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"  onmouseover="className='txtMpL3021'" onmouseout="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 控件数据设置
页面效果如图所示:
【ASP.NET】5.百度富文本编辑器UEditor之存入数据库
会以html的形式存入数据库,如下图所示:

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




相关标签: .net ueditor