在.NET下如何方便地使用百度文本编辑器UEditor

最新推荐文章于 2018-07-11 18:21:00 发布

aspnet2002web

最新推荐文章于 2018-07-11 18:21:00 发布

阅读量7.8k

点赞数

分类专栏： .NET与Ajax技术

本文链接：https://blog.csdn.net/aspnet2002web/article/details/8917642

版权

.NET与Ajax技术专栏收录该内容

7 篇文章 0 订阅

订阅专栏

每个版本可能有些不一样，这里以目前最新版1.2.5为版本。
使用步骤：
1、首先每个ASPX页面要指定根目录地址。如果你是在开发，则根目录地址加上你的网站项目名字，比如我的网站项目名字是BridgeWeb，则根目录地址设置为：window.UEDITOR_HOME_URL = "/BridgeWeb/ueditor/";如果你是上传的服务器，我们知道上传到服务器是把自己网站项目里的所有文件都传到服务器了，服务器上是没有你这个网站项目的文件夹的，所以传到服务器，不用加项目名字BridgeWeb，改为window.UEDITOR_HOME_URL = "/ueditor/"; 具体如下的前台代码所示。
2、加一个文本框用DIV包住，把文本框隐藏起来。注意不能把文本框的属性Visible设置为false来实现隐藏，因为设置为false后，此文本框就不会解释成HTML对应的标签了。
3、利用脚本把百度编辑器UEditor对象的内容设置到隐藏的文本框里，详细下前台代码的getContent()方法。如果是更新则就把文本框里的内容设置到百度编辑器里。详细下前台代码的setContent()方法。
4、最后我们在后台使用的时候，就可以很方便的使用这个隐藏的文本框了，不用和百度文本编辑器直接打交道了。
另外注意：
1、在使用setContent()方法前要加上ue.ready，让编辑器下载完毕后，再运行setContent()，否则会出错，我在网上找到的例子没有这个，我照着做就是出错，希望大家少走弯路。
2、配置在editor_config.js里，每次版本更新，总是对配置做些更改。但有些基本配置要默认下，不要让新手来改了，否则新手的确迷糊，我用过几次了，但每个版本都是迷糊下，闹心。今天在用的时候，都做完了传到服务器了用的时候，发现内容长的时候，不出现垂直滚动条，编辑器也跟着往下走，这明显不符合基本的用法嘛。其实把editor_config.js中的//,autoHeightEnabled:true改为,autoHeightEnabled:false就可以了，把前面的注释取消并改为false。
3、这个版本在ueditor\net下有个Uploader.cs文件，在发布网站后的文件夹里是没有的，所以在往服务器上传的时候，别忘了把这个文件复制过来，上传上去。

前台代码为：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="AddNews.aspx.cs" ValidateRequest="false"    Inherits="admin_AddNews" %>
<!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 runat="server">
    <title></title>
    <script src="../ueditor/jquery-1.6.2.js" type="text/javascript"></script>
    <script type="text/javascript">
        window.UEDITOR_HOME_URL = "/BridgeWeb/ueditor/";
        //传到服务器，不用加项目名字BridgeWeb，改为如下：
        //window.UEDITOR_HOME_URL = "/ueditor/";
    </script>
    <script src="../ueditor/editor_config.js" charset="utf-8" type="text/javascript"></script>
    <link href="../ueditor/themes/default/css/ueditor.css" rel="stylesheet" type="text/css" />
    <script src="../ueditor/editor_all.js" type="text/javascript"></script>
</head>
<body>
    <form id="form1" runat="server">
        <div style="display: none">
            <asp:TextBox ID="txtContent" runat="server" Height="33px" TextMode="MultiLine" Width="159px" Visible="true"></asp:TextBox>
        </div>
        <table>
            <tr height="450px" style="overflow: hidden">
                <th>
                    文章内容：
                </th>
                <td style="vertical-align: top">
                    <script type="text/plain" id="editor" style="width: 800px; height: 400px"></script>
                </td>
            </tr>
            <tr>
                <th>
                </th>
                <td style="vertical-align: top">
                    <asp:Button ID="Button1" runat="server" Text="添 加" OnClick="Button1_Click" /><br />
                    <asp:Label ID="Label1" runat="server"></asp:Label>
                </td>
            </tr>
        </table>
        <script type="text/javascript">
            //创建一个编辑器实例
            var ue = new baidu.editor.ui.Editor();
            
            //渲染编辑器的DOM到指定容器，必须且只能调用一次
            ue.render('editor');

            //将UE编辑器的内容给予 服务器控件  
            function getContent() {
                document.getElementById("txtContent").value = ue.getContent();
            }
            
            //将提取到的文章内容 给予UE编辑器  
            function setContent() {
                var val = document.getElementById("txtContent").value;
                ue.setContent(val);
            }
            
            $(document).ready(function() {
                //点击添加，或修改 文章内容时 //将UE编辑器的内容给予 服务器控件  
                $("#Button1").click(function() {
                    getContent();
                });
                
                //需要ready后执行，否则可能报错
                ue.ready(function(){
                    
                    //如果修改时，将提取到的文章内容 给予UE编辑器  
                    setContent();
                })
            });  
        </script>
    </form>
</body>
</html>

后台代码为：

using System;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class admin_AddNews : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {
            //设置编辑器内容
            txtContent.Text = "你好，世界！";
        }
    }
    protected void Button1_Click(object sender, EventArgs e)
    {
        //取得编辑器的内容
        Label1.Text = txtContent.Text;
    }
}

aspnet2002web

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
在.NET下如何方便地使用百度文本编辑器UEditor

每个版本可能有些不一样，这里以目前最新版1.2.5为版本。使用步骤：1、首先每个ASPX页面要指定根目录地址。如果你是在开发，则根目录地址加上你的网站项目名字，比如我的网站项目名字是BridgeWeb，则根目录地址设置为：window.UEDITOR_HOME_URL = "/BridgeWeb/ueditor/";如果你是上传的服务器，我们知道上传到服务器是把自己网站项目里的所有文件都传
复制链接

扫一扫