先来张成功的图
前端代码:
html:
<form class="layui-form" action="/article/add" method="post" id="atricleForm">
<!-- 文章标题 -->
<div class="layui-form-item">
<div class="layui-input-block" style="margin-left: 0px;">
<input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入文章标题" class="layui-input">
</div>
</div>
<!-- 文章内容 -->
<div class="layui-form-item layui-form-text">
<div class="layui-input-block" style="margin-left: 0px;">
<textarea class="layui-textarea layui-hide" name="content" lay-verify="content" id="articleContent"></textarea>
</div>
</div>
<!-- 文章标签 -->
<div class="layui-form-item">
<div class="layui-input-block" style="margin-left: 0px;">
<input type="text" name="label" lay-verify="title" autocomplete="off" placeholder="请输入文章标签,用英文逗号隔开。" class="layui-input">
</div>
</div>
<button name="status" value="1" class="layui-btn" lay-submit lay-filter="*">保存到草稿</button>
<button name="status" value="2" class="layui-btn" lay-submit lay-filter="*">发布</button>
</form>
js:
layui.use(['element','layedit','layer','form'], function(){
var $ = layui.jquery;
var element = layui.element;
var layedit = layui.layedit;
var layer = layui.layer;
var form = layui.form;
$("#createArticlePanel").click(function() {
$.ajax({
url : '/html/article/add.html',
type : 'GET',
success : function(data){
element.tabAdd('mainPanel', {
title: '添加文章',
content: data, //
id: '10000'
});
element.tabChange('mainPanel', '10000');
layedit.set({
uploadImage: {
url: '/upload/image' //接口url
,type: 'post' //默认post
}
});
//注意:layedit.set 一定要放在 build 前面,否则配置全局接口将无效
layedit.build('articleContent');
}
})
});
});
后端用 file 接收,代码:
@Controller
@RequestMapping("/upload")
public class FileUploadController {
@Autowired
private FileUploadService fileUploadService;
@RequestMapping(value="/image", method = RequestMethod.POST)
@ResponseBody
public String uploadImage(MultipartFile file){
FileUploadResult result = fileUploadService.uploadImage(file);
return JsonUtils.objectToJson(result);
}
}
解决了这个好开心
先用这个编辑器,等功能写的差不多了再换 Markdown 编辑器
欢迎来到这里!
我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。
注册 关于