layui 富文本编辑器图片上传

先来张成功的图

前端代码：

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 编辑器