commonly used in the Rich Text editor places: Message Board, forum post page and reply page and so on.
the software used VS2012 flagship edition
kindeditor Download Address (version 4.1.10 used in this example):
http://download.csdn.net/detail/donggege214/8454299
Official website (version may be updated):
http://kindeditor.net/
Post-Implementation effect:
Here's how to implement this.
First, the directory structure chart:
Second, detailed steps:
1, will download a good kindeditor to your site root directory (in the case of the root directory is kindeditor), the directory structure of the "Earth Network Kindeditor", right, add references-> browse-> Locate the litjson.dll-> in the bin directory under the ASP.net directory just extracted from the folder.
2, add Web Forms->default.aspx (Web page name casually, here with the default name)-> OK.
(1) Front code :
<%@ Page language= "C #" autoeventwireup= "true" codefile= "Default.aspx.cs" inherits= "_default"%>
<! DOCTYPE html>
<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, function () {
Self.sync ();
K (' form[name=example] ') [0].submit ();
});
K.ctrl (Self.edit.doc, function () {
Self.sync ();
K (' form[name=example] ') [0].submit ();
});
}
});
Prettyprint ();
});
</script>
<body>
<form id= "Form1" runat= "Server" >
<div>
<table style= "width:500px" >
<tr>
<td> Message Board </td>
</tr>
<tr>
<td><textarea id= "Content1" cols= "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>
The Blue Highlight section is the path, and if the path is set incorrectly, the textarea is not displayed as a rich Text edit box when debugging. Here simply, "/" represents the root directory of the site, "... /"represents the upper directory.
(2) Background code :
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"?>
<!--
For more information about how to configure the ASP.net application, visit the
http://go.microsoft.com/fwlink/?LinkId=169433
-->
<configuration>
<system.web>
<compilation debug= "True" targetframework= "4.0"/>
<pages validaterequest= "false"/>
</system.web>
</configuration>
If you do not configure Web.config here, you will be prompted for dangerous values when the text has a style ... The error. Of course, setting ValidateRequest to false here will definitely pose some security concerns. Currently no better solution, if anyone has, welcome to share ~
All right, here we are.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
