MVC项目开中用到了KindEditor图片上传工具，需要在编辑区内上传图片，并将图片的URL保存为符合如下格式地址,如http://192.168.0.111/uploadImg/imgName.jpg.
我是这样处理的：
1、添加引用
<link href="~/Scripts/kindeditor-4.1.3/themes/default/default.css" rel="stylesheet" />
<link href="~/Scripts/kindeditor-4.1.3/plugins/code/prettify.css" rel="stylesheet" />
<script type="text/javascript" src="~/Scripts/kindeditor-4.1.3/kindeditor-all-min.js"></script>
<script type="text/javascript" src="~/Scripts/kindeditor-4.1.3/lang/zh-CN.js"></script>
<script type="text/javascript" src="~/Scripts/kindeditor-4.1.3/plugins/code/prettify.js"></script>
2、初始化
var editor1;
KindEditor.ready(function (K) {
editor1 = K.create('#txtContent', {
uploadJson: '@Url.Content("~/Scripts/kindeditor-4.1.3/asp.net/upload_json.ashx")',
fileManagerJson: '@Url.Content("~/Scripts/kindeditor-4.1.3/asp.net/file_manager_json.ashx")',
allowFileManager: true,
formatUploadUrl: false,
items: ['source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'code', 'cut', 'copy', 'paste',
'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',
'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',
'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/',
'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold',
'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image',
'pagebreak', 'anchor', '|', 'link', 'unlink'
],
themeType: 'simple'
});
});
这里要注意的是,要想得到绝对地址，一定要设置这个属性
formatUploadUrl: false
HTML代码里增加占位元素
<input type="text" id="txtContent" name="UserIntroduce" style="width: 670px; height: 200px; " />
“UserIntroduce”为属性名，这个要给对了，不然拿不到值。
这样，在提交表单时就可以获取到里面的内容了。
3、上传图片时点确定上传与保存图片
我用的是工具包自带的上传功能文件名：upload_json.ashx
它提供判断、保存与返回路径，功能已经很全了。
我们的绝地址就是在这个文件里创建的。
一顿拼呀...
Uri uri = HttpContext.Current.Request.Url;
string url = "http://" + uri.Host + ":" + uri.Port.ToString() + "/Upload/"+path+"/" + fileName;
这个url就是我们要保存到数据库中的啦。
4、提交表单
function SaveForm() {
editor1.sync();
$('#fm').form('submit', {
url: '/Member/AddMember',
type: 'post',
onSubmit: function () {
return $(this).form('validate');
},
success: function (result) {
var result = eval('(' + result + ')');
if (result.flag != "OK") {
$.messager.show({
title: 'Error',
msg: "保存失败。"
});
}
else {
$.messager.show({
title: '提示',
msg: "操作成功"
});
window.location.href = "/Member/Index";
}
}
});
}
注意，提交时一定要调一下editor1.sync()，不然后台拿不到值。
5、后台接收与保存
就是用相应对象接收表单数据就可以了，不说了。