UEditor富文本简单使用

时间：2022-06-13 10:09:08

简单使用编辑器UEditor（录入）步骤：

1，下载Ueditor插件（文中使用1.4.3版本），添加js引用。

    <script src="../js/ueditor/ueditor.config.js" type="text/javascript"></script>
    <script src="../js/ueditor/ueditor.all.min.js" type="text/javascript"></script>
    <script src="../js/ueditor/lang/zh-cn/zh-cn.js" type="text/javascript"></script>

2，实例化

    $(function () {
        var editor = UE.getEditor('editor', { wordCount: false, elementPathEnabled: false });
        editor.ready(function () {
            editor.setContent($('#hdncontent').val());  //赋值给UEditor
        });
    });　　

前台页面：

UEditor富文本简单使用UEditor富文本简单使用
<%@ Page Language="C#" AutoEventWireup="true" validateRequest="false" CodeBehind="ttnewsadd.aspx.cs" Inherits="web.system.ttnewsadd" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <link href="/css/default.css" rel="stylesheet" type="text/css" />
    <link href="/css/jquery.ui.all.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="/js/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="/js/jquery.ui.core.js"></script>
    <script type="text/javascript" src="/js/jquery.ui.widget.js"></script>
    <script type="text/javascript" src="/js/jquery.ui.mouse.js"></script>
    <script type="text/javascript" src="/js/jquery.ui.draggable.js"></script>
    <script type="text/javascript" src="/js/jquery.ui.position.js"></script>
    <script type="text/javascript" src="/js/jquery.ui.resizable.js"></script>
    <script type="text/javascript" src="/js/jquery.ui.button.js"></script>
    <script type="text/javascript" src="/js/jquery.ui.dialog.js"></script>
    <script type="text/javascript" src="/js/jquery.ui.datepicker.js"></script>
    <script type="text/javascript" src="/js/common.js?r=20140613"></script>
    <script type="text/javascript" src="/js/jquery.validate.js"></script>
    <script src="/js/scroll.js" type="text/javascript"></script>
    <script src="../js/ueditor/ueditor.config.js" type="text/javascript"></script>
    <script src="../js/ueditor/ueditor.all.min.js" type="text/javascript"></script>
    <script src="../js/ueditor/lang/zh-cn/zh-cn.js" type="text/javascript"></script>
    <style type="text/css">
        .tdClass
        {
            line-height: 15px !important;
        }
        .tdClass2
        {
            line-height: 22px !important;
        }
        .tdClass3
        {
            line-height: 15px !important;
            width: 106px;
            word-break: break-all;
        }
        .tdClass4
        {
            line-height: 15px !important;
            width: 128px;
            word-break: break-all;
        }
        .swiper_wrap
        {
            position: relative;
            width: 100%;
            height: 30px;
            margin: 0 auto;
            overflow: hidden;
        }
        ul
        {
            position: relative;
            top: 0;
            left: 0;
            width: 100%;
            float: right;
            color: #444;
            font-size: 14px;
            margin-top: 1px;
        }
        ul li
        {
            line-height: 30px;
            padding-left: 24px;
        }
        
        .swiper_wrap .font_inner a
        {
            color: red;
        }
        .swiper_wrap a:hover
        {
            color: red;
            text-decoration: underline;
        }
        .style1
        {
            height: 30px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server" action="" method="post">
    <input type="hidden" name="pkid" id="pkid" runat="server"/>
    <input type="hidden" name="actiontype" id="actiontype" value="look" runat="server"/>
    <asp:HiddenField ID="hdtype" runat="server" />
    <div class="title">
        <span>【公告编辑】<label style="color: purple;"></label></span>
    </div>
    <div class="dbox">
        <table cellpadding="0" cellspacing="0" class="oderAdmin">
            <tr>
                <th>
                    公告类型：
                </th>
                <td>
                    <asp:DropDownList runat="server" ID="ddltype">
                        <asp:ListItem Text="" Value=""></asp:ListItem>
                        <asp:ListItem Text="系统公告" Value="1"></asp:ListItem>
                        <asp:ListItem Text="其他公告" Value="2"></asp:ListItem>
                    </asp:DropDownList>
                </td>
            </tr>
            <tr>
                <th>
                    公告标题：
                </th>
                <td>
                    <asp:TextBox ID="txtTitle" runat="server" Width="740px"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <th>
                    公告内容：
                </th>
                <td>
                    <script id="editor" type="text/plain" style="width: 740px; height: 300px;"></script>
                </td>
            </tr>
            <tr>
                <th>
                    发布时间：
                </th>
                <td>
                    <asp:TextBox ID="txtpublishtime" runat="server" rel="datetime"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <th class="style1">
                    发布状态：
                </th>
                <td class="style1">
                    <asp:DropDownList runat="server" ID="dllstate">
                        <asp:ListItem Value=""></asp:ListItem>
                        <asp:ListItem Value="0" Selected="True">未发布</asp:ListItem>
                        <asp:ListItem Value="1">已发布</asp:ListItem>
                    </asp:DropDownList>
                </td>
            </tr>
            <tr>
                <td colspan="2" style="text-align: center">
                    <input type="button" id="btnSubmit" class="button button-primary" value="保存" onclick="onsubmitform('save');" />
                </td>
            </tr>
        </table>
    </div>
    <input type="hidden" id="hdncontent" name="hdncontent" value='<%=_content %>' />
    </form>
</body>
</html>
<script type="text/javascript">
    function GetEditor() {
        var editor = UE.getEditor('editor', { wordCount: false, elementPathEnabled: false });
        if (editor == null || editor == undefined) {
            editor = UE.getEditor('editor', { wordCount: false, elementPathEnabled: false });
        }
        return editor;
    }

    function onsubmitform(type) {
        $("#actiontype").val(type);
        $("#hdncontent").val(GetEditor().getContent());
        $("#form1").submit();
    }

    $(function () {
        var editor = UE.getEditor('editor', { wordCount: false, elementPathEnabled: false });
        editor.ready(function () {
            editor.setContent($('#hdncontent').val());  //赋值给UEditor
        });
    });
</script>
View Code

后台代码：

UEditor富文本简单使用UEditor富文本简单使用
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Text;
using web.code;
using webframework.model.b2b;
using webframework.model;
using webframework.bll;

namespace web.system
{
    public partial class ttnewsadd : code.BasePage
    {
        protected string _content;
        protected string _typestr = "look";
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                hdtype.Value = Request.QueryString["type"];
                if (string.IsNullOrEmpty(hdtype.Value))
                {
                    base.Alert("请选择对应操作");
                    return;
                }
                BingData();
            }
            if (!string.IsNullOrEmpty(Request.Form["actiontype"]))
            {
                if (Request.Form["actiontype"] == "save")
                    Save();
            }
        }

        private void BingData()
        {
            string id = Request.QueryString["id"];
            if (!string.IsNullOrEmpty(id))
            {
                string sql = "select * from t_system_news where id={0}";
                DataTable _dt = code.SqlHelper.ExecuteDataTable(code.SqlHelper.ConnectionString, CommandType.Text, string.Format(sql, id));
                if (_dt != null && _dt.Rows.Count > 0)
                {
                    txtTitle.Text = _dt.Rows[0]["title"].ToString();
                    dllstate.SelectedValue = _dt.Rows[0]["isenable"].ToString();
                    ddltype.SelectedValue = _dt.Rows[0]["newstype"].ToString();
                    _content = _dt.Rows[0]["contents"].ToString();
                    pkid.Value = _dt.Rows[0]["id"].ToString();
                    if (!string.IsNullOrEmpty(_dt.Rows[0]["publishtime"].ToString()))
                        txtpublishtime.Text = _dt.Rows[0]["publishtime"].ToString();
                }
            }
        }

        private void Save()
        {
            if (string.IsNullOrEmpty(txtTitle.Text.Trim()))
            {
                Alert("公告标题不能为空");
                txtTitle.Focus();
                return;
            }
            string contents = Request.Form["hdncontent"].Trim();
            if (string.IsNullOrEmpty(contents))
            {
                Alert("公告内容不能为空");
                return;
            }
            if (string.IsNullOrEmpty(dllstate.SelectedValue))
            {
                Alert("发布状态不能为空");
                dllstate.Focus();
                return;
            }
            if (string.IsNullOrEmpty(ddltype.SelectedValue))
            {
                Alert("公告类型不能为空");
                ddltype.Focus();
                return;
            }
            string type = hdtype.Value;
            bllsystemnews bll = new bllsystemnews();
            DateTime dtnow = DateTime.Now;
            t_system_news demo = new t_system_news();
            if (type == "edit")
                demo = bll.GetModel(int.Parse(pkid.Value));

            demo.title = txtTitle.Text.Trim();
            demo.contents = contents;
            demo.isenable = dllstate.SelectedValue;
            demo.newstype = int.Parse(ddltype.SelectedValue);
            demo.publishtime = dtnow;
            if (!string.IsNullOrEmpty(txtpublishtime.Text))
                demo.publishtime = Convert.ToDateTime(txtpublishtime.Text);
            demo.title = txtTitle.Text;
            demo.updateid = UserOnline.Current.UserID.ToString();
            demo.updatename = UserOnline.Current.UserName;
            demo.updatetime = dtnow;
            if (type == "add")
            {
                demo.createid = UserOnline.Current.UserID.ToString();
                demo.createname = UserOnline.Current.UserName;
                demo.createtime = dtnow;
                if (bll.Add(demo))
                {
                    code.CacheCollection.DelCacheByKeypre("GetSystemNews");
                    ScriptHelper.PopMessageRunScript("添加成功", "DialogCloseAndReload();");
                }
                else
                    Alert("添加失败");                
            }
            else if (type == "edit")
            {
                if (bll.Update(demo))
                {
                    code.CacheCollection.DelCacheByKeypre("GetSystemNews");
                    ScriptHelper.PopMessageRunScript("编辑成功", "DialogCloseAndReload();");
                }
                else
                    Alert("编辑失败");
            }
            else
            {
                Alert("数据丢失，请重新尝试");
            }
        }

        protected void btnadd_Click(object sender, EventArgs e)
        {

        }
    }
}
View Code

===================================

简单使用编辑器UEditor（展示）步骤：

1，引用js

   <script src="../js/ueditor/ueditor.parse.js" type="text/javascript"></script>

2，初始化js

<script type="text/javascript">
    $(function () {
        uParse('#content', {
            rootPath: '../js/ueditor/'
        })
    });
</script>

 

前台页面：

UEditor富文本简单使用UEditor富文本简单使用
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ttnewsdetail.aspx.cs" Inherits="web.system.ttnewsdetail" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <link href="/css/default.css" rel="stylesheet" type="text/css" />
    <link href="/css/jquery.ui.all.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="/js/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="/js/jquery.ui.core.js"></script>
    <script type="text/javascript" src="/js/jquery.ui.widget.js"></script>
    <script type="text/javascript" src="/js/jquery.ui.mouse.js"></script>
    <script type="text/javascript" src="/js/jquery.ui.draggable.js"></script>
    <script type="text/javascript" src="/js/jquery.ui.position.js"></script>
    <script type="text/javascript" src="/js/jquery.ui.resizable.js"></script>
    <script type="text/javascript" src="/js/jquery.ui.button.js"></script>
    <script type="text/javascript" src="/js/jquery.ui.dialog.js"></script>
    <script type="text/javascript" src="/js/jquery.ui.datepicker.js"></script>
    <script type="text/javascript" src="/js/common.js?r=20140613"></script>
    <script type="text/javascript" src="/js/jquery.validate.js"></script>
    <script src="/js/scroll.js" type="text/javascript"></script> 
    <script src="../js/ueditor/ueditor.parse.js" type="text/javascript"></script> 
</head>
<body>
    <form id="form1" runat="server" action="" method="post">
    <input type="hidden" name="pkid" id="pkid" runat="server" />
    <input type="hidden" name="actiontype" id="actiontype" value="look" runat="server" />
    <asp:HiddenField ID="hdtype" runat="server" />
    <div class="title">
        <span>【公告查看】<label style="color: purple;"></label></span>
    </div>
    <div class="dbox">
        <% if (_dtsystemnews != null)
           { %>
        <table cellpadding="0" cellspacing="0" class="oderAdmin" border="1">
            <tr>
                <th>
                    公告类型：
                </th>
                <td>
                    <div style="font-size: 15px;">
                        <%=_dtsystemnews.Rows[0]["newstypedesc"]%></div>
                </td>
            </tr>
            <tr>
                <th>
                    公告标题：
                </th>
                <td>
                    <div style="width: 740px; color: red; font-size: 20px;">
                        <%=_dtsystemnews.Rows[0]["title"]%></div>
                </td>
            </tr>
            <tr>
                <th>
                    公告内容：
                </th>
                <td>
                    <div id="content" style="width: 740px; height: 300px;">
                        <%=_dtsystemnews.Rows[0]["contents"]%></div>
                </td>
            </tr>
            <tr>
                <th>
                    发布时间：
                </th>
                <td>
                    <%=_dtsystemnews.Rows[0]["publishtime"]%>
                </td>
            </tr>
            <tr>
                <th>
                    编辑人员：
                </th>
                <td>
                    <%=_dtsystemnews.Rows[0]["updatename"]%>
                </td>
            </tr>
            <tr>
                <th>
                    编辑时间：
                </th>
                <td>
                    <%=_dtsystemnews.Rows[0]["updatetime"]%>
                </td>
            </tr>
        </table>
        <%
           } %>
    </div>
    </form>
</body>
</html>
<script type="text/javascript">
    $(function () {
        uParse('#content', {
            rootPath: '../js/ueditor/'
        })
    });
</script>
View Code

后台页面：

UEditor富文本简单使用UEditor富文本简单使用
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Text;
using web.code;
using webframework.model.b2b;
using webframework.model;
using webframework.bll;
namespace web.system
{
    public partial class ttnewsdetail : code.BasePage
    {
        protected DataTable _dtsystemnews = null;
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                hdtype.Value = Request.QueryString["type"];
                if (string.IsNullOrEmpty(hdtype.Value))
                {
                    base.Alert("请选择对应操作");
                    return;
                }
                BingData();
            }
        }

        private void BingData()
        {
            string id = Request.QueryString["id"];
            if (!string.IsNullOrEmpty(id))
            {
                string sql = "select * from t_system_news where id={0}";
                DataTable dtnews = code.SqlHelper.ExecuteDataTable(code.SqlHelper.ConnectionString, CommandType.Text, string.Format(sql, id));
                //DataTable dtnews = code.CacheCollection.GetSystemNews("1");
                if (dtnews != null && dtnews.Rows.Count > 0)
                {
                    if (!dtnews.Columns.Contains("newstypedesc"))
                        dtnews.Columns.Add("newstypedesc", typeof(string));
                    
                    DataRow[] rows = dtnews.Select("id=" + id);
                    if (rows != null && rows.Length > 0)
                    {
                        _dtsystemnews = dtnews.Clone();
                        foreach (DataRow item in rows)
                        {
                            item["newstypedesc"] = item["newstype"].ToString() == "1" ? "系统公告" : "其他公告";
                            _dtsystemnews.ImportRow(item);
                        }
                       // _dtsystemnews.DefaultView.Sort = "publishtime desc"; 
                    }
                }

                
            }
        }
    }
}
View Code

 

参考资料：http://fex.baidu.com/ueditor/#start-start

标签：

相关文章