由于项目中很多处要用到KindEdit文本编辑器,在网上查阅了很多文章,自己写了个用户控件
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace TraineeManagementSystem.Include.Ascx
{
public partial class KindEditor : System.Web.UI.UserControl
{
//定义前台KindEditor空间的ID
public string ControlID;
//定义系统跟目录
public string FileURL,FormID;
protected void Page_Load(object sender, EventArgs e)
{
ControlID = KindEditors.ClientID;
FileURL = HttpContext.Current.Request.ApplicationPath;
if (FileURL.Length == 1)
{
FileURL = "";
}
FormID = this.Page.Form.ClientID;
if (kindEditorContent == null)
kindEditorContent = TraineeManagementSystem.Code.Filter.FilterHtml(KindEditors.Value);
else
KindEditors.Value = kindEditorContent;
}
private string kindEditorContent;
/// <summary>
/// KindEditor内容
/// </summary>
public string KindEditorContent
{
get { return kindEditorContent; }
set { kindEditorContent = value; }
}
private string kindEditorWidth;
/// <summary>
/// KindEditor控件的宽度
/// </summary>
public string KindEditorWidth
{
get { return kindEditorWidth; }
set { kindEditorWidth = value; }
}
private string kindEditorHeght;
/// <summary>
/// KindEditor高度
/// </summary>
public string KindEditorHeight
{
get { return kindEditorHeght; }
set { kindEditorHeght = value; }
}
}
}
ASCX:
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="KindEditor.ascx.cs" Inherits="TraineeManagementSystem.Include.Ascx.KindEditor" %>
<link rel="stylesheet" href="<%= FileURL %>/Include/KindEditor/themes/default/default.css" />
<link rel="stylesheet" href="<%= FileURL %>/Include/KindEditor/plugins/code/prettify.css" />
<script type="text/javascript" charset="utf-8" src="<%= FileURL %>/Include/KindEditor/kindeditor.js"></script>
<script type="text/javascript" charset="utf-8" src="<%= FileURL %>/Include/KindEditor/lang/zh_CN.js"></script>
<script type="text/javascript" charset="utf-8" src="<%= FileURL %>/Include/KindEditor/plugins/code/prettify.js"></script>
<script type="text/javascript">
KindEditor.ready(function (K) {
var editor1 = K.create('#<%=ControlID %>',
{
cssPath: '<%=FileURL %>/Include/KindEditor/plugins/code/prettify.css',
uploadJson: '<%=FileURL %>/Include/KindEditor/asp.net/upload_json.ashx',
fileManagerJson: '<%=FileURL %>/Include/KindEditor/asp.net/file_manager_json.ashx',
allowFileManager: true,
width: '<%=KindEditorWidth %>',//设置控件宽度
height: '<%= KindEditorHeight %>',//设置空间高度
resizeType:'1',//只允许调整高度
afterCreate: function () {
var self = this;
K.ctrl(document, 13, function () {
self.sync();
K('form[name=<%= FormID%>]')[0].submit();
});
K.ctrl(self.edit.doc, 13, function () {
self.sync();
K('form[name=<%= FormID%>]')[0].submit();
});
}
});
prettyPrint();
});
</script>
<textarea id="KindEditors" style="width:100%;height:100%" runat="server"></textarea>
纠结的是如何给textarea的style属性绑定变量?在编辑是插入控件的大小显示和父级宽高一样,但是在浏览器中显示的是我设置的正常高度(width: '<%=KindEditorWidth %>',//设置控件宽度 height: '<%= KindEditorHeight %>',//设置空间高度)