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、后台接收與保存
就是用相應對象接收表單數據就可以了，不說了。