layui 富文本编辑器图片上传

本贴最后更新于 1527 天前,其中的信息可能已经斗转星移

先来张成功的图

图片上传测试.jpg

前端代码:

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

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...