<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<html xmlns="<head>
<title></title>
<!--ExtJs框架開始-->
<script type="text/javascript" src="/Ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="/Ext/ext-all.js"></script>
<script src="/Ext/src/locale/ext-lang-zh_CN.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="/Ext/resources/css/ext-all.css" />
<!--ExtJs框架結束-->
<!--添加KeEditor的引用開始-->
<script src="/kindeditor/kindeditor.js" type="text/javascript"></script>
<!--添加KeEditor的引用結束-->
<script type="text/javascript">
Ext.onReady(function () {
//初始化標簽中的Ext:Qtip屬性。
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';
//創建文本上傳域
var exteditor = new Ext.form.HtmlEditor({
fieldLabel: '員工描述'
});
//整合KE編輯器
var keeditor = new Ext.form.TextArea({
id: 'keeditor',
fieldLabel: '員工描述',
width: 700,
height: 200
});
//表單
var form = new Ext.form.FormPanel({
frame: true,
title: '表單標題',
style: 'margin:10px',
items: [exteditor, keeditor],
listeners: {
'render': function () {
KE.show({
id: 'keeditor',
imageUploadJson: '/App_Ashx/Upload.ashx'
});
setTimeout("KE.create('keeditor');", 1000);
}
}
});
//窗體
var win = new Ext.Window({
title: '窗口',
width: 900,
height: 700,
resizable: true,
modal: true,
closable: true,
maximizable: true,
minimizable: true,
buttonAlign: 'center',
items: form
});
win.show();
});
</script>
</head>
<body>
<!--
說明:
(1) var exteditor = new Ext.form.HtmlEditor():創建一個新的html編輯器。
(2) var keeditor = new Ext.form.TextArea():創建一個新的TextArea。
(3) listeners: {
'render': function () {
KE.show({
id: 'keeditor',
imageUploadJson: '/App_Ashx/Upload.ashx'
});
setTimeout("KE.create('keeditor');", 1000);
}
}
監聽表單的 render 事件,創建 KE Editor.(2),(3)中的id 要統一,否則無法顯示。
imageUploadJson: '/App_Ashx/Upload.ashx',keeditor上傳圖片的后臺執行文件
-->
</body>
</html>
其中與service交互用上傳圖片的 一般處理程序文件,源碼如下: