UEditor富文本简单使用

2022-11-18 10:35:37

简单使用编辑器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

        });

    });　　

前台页面：

<%@ 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>

后台代码：

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 > )

                {

                    txtTitle.Text = _dt.Rows[]["title"].ToString();

                    dllstate.SelectedValue = _dt.Rows[]["isenable"].ToString();

                    ddltype.SelectedValue = _dt.Rows[]["newstype"].ToString();

                    _content = _dt.Rows[]["contents"].ToString();

                    pkid.Value = _dt.Rows[]["id"].ToString();

                    if (!string.IsNullOrEmpty(_dt.Rows[]["publishtime"].ToString()))

                        txtpublishtime.Text = _dt.Rows[]["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)

        {

        }

    }

}

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

简单使用编辑器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>

前台页面：

<%@ 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="" cellspacing="" class="oderAdmin" border="">

            <tr>

                <th>

                    公告类型：

                </th>

                <td>

                    <div style="font-size: 15px;">

                        <%=_dtsystemnews.Rows[]["newstypedesc"]%></div>

                </td>

            </tr>

            <tr>

                <th>

                    公告标题：

                </th>

                <td>

                    <div style="width: 740px; color: red; font-size: 20px;">

                        <%=_dtsystemnews.Rows[]["title"]%></div>

                </td>

            </tr>

            <tr>

                <th>

                    公告内容：

                </th>

                <td>

                    <div id="content" style="width: 740px; height: 300px;">

                        <%=_dtsystemnews.Rows[]["contents"]%></div>

                </td>

            </tr>

            <tr>

                <th>

                    发布时间：

                </th>

                <td>

                    <%=_dtsystemnews.Rows[]["publishtime"]%>

                </td>

            </tr>

            <tr>

                <th>

                    编辑人员：

                </th>

                <td>

                    <%=_dtsystemnews.Rows[]["updatename"]%>

                </td>

            </tr>

            <tr>

                <th>

                    编辑时间：

                </th>

                <td>

                    <%=_dtsystemnews.Rows[]["updatetime"]%>

                </td>

            </tr>

        </table>

        <%

           } %>

    </div>

    </form>

</body>

</html>

<script type="text/javascript">

    $(function () {

        uParse('#content', {

            rootPath: '../js/ueditor/'

        })

    });

</script>

后台页面：

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 > )

                {

                    if (!dtnews.Columns.Contains("newstypedesc"))

                        dtnews.Columns.Add("newstypedesc", typeof(string));

                    DataRow[] rows = dtnews.Select("id=" + id);

                    if (rows != null && rows.Length > )

                    {

                        _dtsystemnews = dtnews.Clone();

                        foreach (DataRow item in rows)

                        {

                            item["newstypedesc"] = item["newstype"].ToString() == "" ? "系统公告" : "其他公告";

                            _dtsystemnews.ImportRow(item);

                        }

                       // _dtsystemnews.DefaultView.Sort = "publishtime desc";

                    }

                }

            }

        }

    }

}

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

上一篇：封装JDBC：实现简单ORM框架lfdb


下一篇：ext 树节点操作