【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/config.json
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> <div>
<textarea class="A4page" id="myEditor" name="NewsContent"></textarea>
</div> <!-- 实例化编辑器 -->
<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>
#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 控件数据设置会以html的形式存入数据库，如下图所示：