kindeditor-4.1.3工具使用技巧:如何在编辑区上传图片并保存绝对路径

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、后台接收与保存

就是用相应对象接收表单数据就可以了，不说了。