首頁 > 開發者 > ASP

ASP.NET一款免費富文本（RichText）編輯器KindEditor，實現線上排版編輯文章。這裡簡單介紹下如何使用

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！


一般用到富文字編輯器的地方：留言板，論壇的發帖頁以及回複頁等。


所用軟體VS2012旗艦版


KindEditor下載地址（本文執行個體中所用版本4.1.10）：

http://download.csdn.net/detail/donggege214/8454299


官網（版本可能會更新）:

http://kindeditor.net/


實現後效果：



下面介紹如何具體實現。

一、目錄結構圖：

二、詳細步驟：

1、將下載好的KindEditor解壓到你的網站根目錄（例子中的根目錄是KindEditor），對著目錄結構中那個“地球網KindEditor”，右鍵，添加引用->瀏覽->找到剛才解壓檔案夾裡的asp.net目錄下bin目錄下的LitJSON.dll->確定。

2、添加web表單->Default.aspx（網頁名字隨便，這裡用的是預設的命名）->確定。

（1）前台代碼：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>


<!DOCTYPE html>


<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <link rel="stylesheet" href="/kindeditor-4.1.10/themes/default/default.css" />
<link rel="stylesheet" href="/kindeditor-4.1.10/plugins/code/prettify.css" />
<script charset="utf-8" src="/kindeditor-4.1.10/kindeditor.js"></script>
<script charset="utf-8" src="/kindeditor-4.1.10/lang/zh_CN.js"></script>
<script charset="utf-8" src="/kindeditor-4.1.10/plugins/code/prettify.js"></script>
<script>
   KindEditor.ready(function (K) {
       var editor1 = K.create('#content1', {
           cssPath: '/kindeditor-4.1.10/plugins/code/prettify.css',
           uploadJson: '/kindeditor-4.1.10/asp.net/upload_json.ashx',
           fileManagerJson: '/kindeditor-4.1.10/asp.net/file_manager_json.ashx',
           allowFileManager: true,
           afterCreate: function () {
               var self = this;
               K.ctrl(document, 13, function () {
                   self.sync();
                   K('form[name=example]')[0].submit();
               });
               K.ctrl(self.edit.doc, 13, function () {
                   self.sync();
                   K('form[name=example]')[0].submit();
               });
           }
       });
       prettyPrint();
   });
</script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
        
    
        <table style="width:500px">
            <tr>
                <td>留言板</td>
            </tr>
            <tr>
                <td><textarea id="content1" cols="100" rows="8" style="width:100%;height:200px;visibility:hidden;" runat="server"></textarea></td>
            </tr>
            <tr>
                <td>
                    <asp:Button ID="Button1" runat="server" Text="Button" />
                </td>
            </tr>
        </table>
    <asp:Label ID="Label1" runat="server"></asp:Label>
    </div>
    </form>
</body>
</html>

藍色高亮顯示部分是路徑，如果路徑設定不正確，那麼調試時textarea是不會顯示成富文本編輯框的。這裡簡單說一下，“/”代表網站的根目錄，“../”代表上層目錄。


（2）後台代碼：

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


public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        this.Label1.Text = Request.Form["content1"];
    }
}

（3）Web.config：

<?xml version="1.0"?>
<!--
  有關如何配置 ASP.NET 應用程式的詳細資料，請訪問
  http://go.microsoft.com/fwlink/?LinkId=169433
  -->
<configuration>
  <system.web>
    <compilation debug="true" targetFramework="4.0"/>
    <pages validateRequest="false" />
    <httpRuntime requestValidationMode="2.0" />
  </system.web>
</configuration>

如果這裡不配置Web.config，當文字有樣式時，會提示有危險值...的報錯。當然，這裡將validateRequest設為false肯定會帶來一些安全問題。目前不會更好的解決辦法，如果誰有，歡迎分享~


好了，至此大功告成。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關文章
ASP學習總結：錯誤碼
反爬蟲：利用ASP.NET MVC的Filter和緩衝（入坑出坑）
ASP.NET Core 2.0利用MassTransit整合RabbitMQ
實戰中的asp.net core結合Consul叢集&Docker實現服務治理
asp DateDiff實現文字在特定時間後消失
設定和讀取ASP.Net全域變數的方法

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

熱門內容

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More