asp.net使用kindeditor网页编辑器

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> <mce:script type="text/javascript"><!-- KE.show({ id : 'content1', imageUploadJson : '../../asp.net/upload_json.ashx', fileManagerJson : '../../asp.net/file_manager_json.ashx', allowFileManager : true, afterCreate : function(id) { KE.event.ctrl(document, 13, function() { KE.util.setData(id); document.forms['form1'].submit(); }); KE.event.ctrl(KE.g[id].iframeDoc, 13, function() { KE.util.setData(id); document.forms['form1'].submit(); }); } }); // --></mce:script>

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/"; private String saveUrl = "./attached/";

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

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

String rootPath = "../../../attached/"; String rootUrl = aspxUrl + "../../../attached/";

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