今天写了一个Layui+Kindeditor 图片上传+图片浏览器+编辑器 php源码，比较简单，但是大家会经常用到，是用前面的Layui + Kindeditor 无法取值那篇文章做了调整，处理的过程发现 Kindeditor 的上传按钮确实不方便，还是Layui的结合得更好。
先看效果图：
Html源码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>蚂蚁学院 Layui + Kindeditor 图片上传+图片浏览+编辑器 php源码</title>
<link rel="stylesheet" href="layui/css/layui.css">
<link rel="stylesheet" href="css.css">
<link rel="stylesheet" href="kindeditor/themes/default/default.css" />
<script charset="utf-8" src="kindeditor/kindeditor-all.js"></script>
<script charset="utf-8" src="kindeditor/lang/zh-CN.js"></script>
</head>
<body>
<div class="layui-container">
<form class="layui-form layui-form-pane" action="">
<div class="layui-form-item">
<div class=" layui-col-md9">
<label class="layui-form-label">图片地址</label>
<div class="layui-input-block">
<input type="text" name="picture" id="picture" autocomplete="off" placeholder="请上传图片" class="layui-input">
</div>
</div>
<div class="layui-col-md3 simple-btn">
<input type="button" class="layui-btn upload" id="uploadBtn" value="上传" >
<input type="button" class="layui-btn" id="broswerBtn" value="浏览">
</div>
</div>
<textarea name="content" style="width:800px;height:400px;visibility:hidden;">蚂蚁学院 http://www.mayixueyaun.com<br />Kindeditor 图片上传+图片浏览+编辑器 php源码</textarea><br />
<button type="submit" class="layui-btn" lay-submit="" lay-filter="submitForm">立即提交</button>
</form>
</div>
<!-- body 末尾处引入 layui -->
<script src="layui/layui.js"></script>
<script>
layui.use(function(){
var layer = layui.layer
var form = layui.form
form.on('submit(submitForm)', function(data){
alert(JSON.stringify(data.field), {
title: '最终的提交信息'
})
return false;
});
});
KindEditor.ready(function(K) {
var upload_url="inc/upload_json.php";
var file_url="inc/file_manager_json.php";
var editor = K.create('textarea[name="content"]', {
fileManagerJson : file_url,
uploadJson : upload_url,
allowFileManager : true,
afterBlur: function () { this.sync(); } //加入这句关键的代码，即可解决问。
});
var logo_btn = K.uploadbutton({
button : K('#uploadBtn')[0],
fieldName : 'imgFile',
url : upload_url,
afterUpload : function(data) {
if (data.error === 0) {
var url = K.formatUrl(data.url, 'absolute');
K('#picture').val(url);
} else {
alert(data.message);
}
},
afterError : function(str) {
alert('自定义错误信息: ' + str);
}
});
logo_btn.fileBox.change(function(e) {
logo_btn.submit();
});
K('#broswerBtn').click(function() {
editor.loadPlugin('filemanager', function() {
editor.plugin.filemanagerDialog({
viewType : 'VIEW',
dirName : '',
clickFn : function(url, title) {
K('#picture').val(url);
editor.hideDialog();
}
});
});
});
});
</script>
</body>
</html>
更多源码请下载查看。
30蚂蚁积分下载
或
3蚂蚁币下载生活每天都是限量版，努力过好当下，就是对人生最大的敬意。让我们不断突破自己，以崭新的自我面对挑战。请你相信，每一个闪闪发光的未来，都有一个努力过的现在。
0
本文标签：
-
已经是最后一篇文章了
- 下一篇>>
