關於百度編輯器UEditor在asp.net中的使用方法！

時間 2019-11-13

標籤關於百度編輯器 ueditor asp.net asp 使用方法欄目 ASP 简体版

原文原文鏈接

爲了完成本身想要的功能效果，在項目中使用到了百度編輯器，爲了搞明白，苦心學習查資料搞了整整一天，總結一下。javascript

在asp.net 的項目中目前我以爲有兩種狀況，一種是沒有使用模板頁的，一種是使用了模板頁的（我用的時候就是使用了模板頁，我在網上查了不少，可是在模板頁寫的不多）css

不廢話了，開始步驟：html

1.首先，下載編輯器，能夠到百度官網上下載完整的，也能夠本身定製須要的功能，再下載附上網址：http://ueditor.baidu.com/website/java

2.下載後解壓，在你須要的項目中新建文件夾ueditor，把解壓好的文件夾中的全部文件複製到新建的文件夾中web

3.添加引用，在項目中添加引用（選擇瀏覽，在複製文件夾ueditor的net的bin目錄下找到dll文件，添加引用）asp.net

如圖：編輯器

4.修改config文件，這裏修改的是文件夾ueditor下的config文件，打開以後修改以下：以下圖學習

5.這樣的話外部的配置基本就完了，如今在aspx頁面加上百度編輯器代碼以下：ui

這裏面有兩種狀況（1）就是沒有使用模板的狀況下this

代碼以下：

 1 <html xmlns="http://www.w3.org/1999/xhtml">
 2 <head runat="server">
 3     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 4     <title>編輯器實例</title>//下面的幾個js和css引用順序不要變。變得話可能致使編輯器顯示不出來
 5     <script type="text/javascript" src="editor/ueditor.config.js"></script>
 6     <script type="text/javascript" src="editor/ueditor.all.js"></script>
 7     <link rel="stylesheet" href="editor/themes/default/dialogbase.css" />
 8     <style type="text/css">
 9         #myEditor
10         {
11             width: 700px;
12           
13         }
14     </style>
15 </head>
16 <body>
17     <div>
18         <form id="form1" runat="server">
19             
20                 <textarea id="myEditor" name="myEditor" runat="server" onblur="setUeditor()"></textarea>
21                 <script type="text/javascript">
22                     var editor = new baidu.editor.ui.Editor();
23                     editor.render("myEditor");
24                 </script>
25                 <div id="myButton" runat="server">
26                     <asp:Button ID="Button" runat="server" Text="獲取數據" OnClick="btnTest_click" />
27 
28                 </div>
29          
30         </form>
31     </div>
32     <script type="text/javascript">
33         function setUeditor() {
34             var myEditor = document.getElementById("myEditor");
35             myEditor.value = editor.getContent();
36         }
37     </script>
38 </body>
39 </html>

（2）就是使用模板的狀況下

代碼以下：

//在content1中添加對js的引用，仍是那個順序不要亂了。這邊的引用也能夠直接寫在模板中，這樣的話用的時候就能夠直接用了，
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
   
    <script  src="../ueditor/ueditor.config.js" type="text/javascript"></script>
     <script  src="../ueditor/ueditor.all.min.js" type="text/javascript"></script>
    <script type="text/javascript" charset="utf-8" src="../ueditor/lang/zh-cn/zh-cn.js"></script>
</asp:Content>
//在你須要編輯器的地方加上以下代碼，
//就是在content2中一個合適的位置
<div>內容：</br>
            <script id="myEditor" type="text/plain"></script>
            <textarea id="myEditor" name="myEditor" runat="server" onblur="setUeditor()" style="width: 1030px;
                height: 250px;"></textarea>
            <%-- 上面這個style這裏是實例化的時候給實例化的這個容器設置寬和高，不設置的話，或默認爲auto可能會形成部分顯示的狀況--%>
            //實例化一個編輯器
            <script type="text/javascript">
                var editor = new baidu.editor.ui.Editor();
                
                editor.render("<%=myEditor.ClientID%>");
            </script>
        </div>
<script type="text/javascript">
        function setUeditor() {
            var myEditor = document.getElementById("myEditor");
            myEditor.value = editor.getContent();//把獲得的值給textarea
        }
    </script>

6.這樣剩下的只有在cs界面的獲取值了，簡單點寫吧首先定義給一個button的點擊事件

代碼以下

1  protected void btnTest_click(object sender, EventArgs e)
2         {
3             string edi = Server.HtmlDecode(myEditor.InnerHtml);
4            this.ClientScript.RegisterStartupScript(this.GetType(), "", "<script>alert('"+edi+"');</script>");//這樣的話會彈出編輯器中你輸入的文本或者其餘（帶格式的，就是包含樣式）
5             
6         }