学步园

1. 下载kindeditor，将所有内容放到放到应用程序中。比如对应地址为http://127.0.0.1/Test

2. 

模拟
asp.net
的例子程序，指定一个
textarea
的
id
。

<textarea id="your_editor_id" name="content" cols="100" rows="8" style="width:700px;height:300px;">

3. 在页面中添加以下代码。

<mce:script type="text/javascript" charset="utf-8" src="kindeditor.js" mce_src="kindeditor.js"></mce:script><br /> <mce:script type="text/javascript"><!--<br /> KE.show({<br /> id : 'content1',<br /> imageUploadJson : '../../asp.net/upload_json.ashx',<br /> fileManagerJson : '../../asp.net/file_manager_json.ashx',<br /> allowFileManager : true,<br /> afterCreate : function(id) {<br /> KE.event.ctrl(document, 13, function() {<br /> KE.util.setData(id);<br /> document.forms['form1'].submit();<br /> });<br /> KE.event.ctrl(KE.g[id].iframeDoc, 13, function() {<br /> KE.util.setData(id);<br /> document.forms['form1'].submit();<br /> });<br /> }<br /> });<br /> // --></mce:script><br />

src为当前aspx文件检索到kindeditor.js的路径。imageUploadJson是相对于plugins/image/image.html的路径。

4. 这个时候，当点击图片上传时，图片会被上传到kindeditor/attached中，但是却无法显示到textarea中，此时查看textarea内容，我们会发现图片的地址为类似于”../attached/XXXXXX.jpg”的形式，试想，如果aspx文件不处在与attached同级的文件夹中，图片便无法访问，所以这时我们需要修改返回的路径，在asp.net文件夹的upload_json.ashx文件，用来处理本地图片的上传，可以看到两个变量

private String savePath = "../attached/";<br /> private String saveUrl = "./attached/";<br />

savePath用来记录存储的目录位置（相对于upload_json.ashx而言）。saveUrl则为返回的图片所在目录，为了能够在textarea中看到返回的图片，我们需要把saveUrl设置为图片文件夹相对于当前aspx文件的路径。

5. asp.net的file_manager_json.ashx文件，用来处理服务器端文件的选择，可以看到两个变量

String rootPath = "../../../attached/";<br /> String rootUrl = aspxUrl + "../../../attached/";

rootPath用来读取服务器中存储图片的文件夹中的所有图片，其目录位置相对于
file_manager_json.ashx而言。rootUrl用来显示每个文件的url，其文件位置也是相对于
file_manager_json.ashx而言。