LayUI富文本編輯器layedit

編輯器layedit

引入文件

<link rel="stylesheet" th:href="@{/layuiadmin/layui/css/layui.css}" media="all">
<script type="text/javascript" th:src="@{/layuiadmin/layui/layui.js}"></script>

頁面調用

<div class="layui-form-item">
	<label class="layui-form-label">文章內容</label>
	<div class="layui-input-block">
		<textarea id="content" name="content" value="" style="display: none;" lay-verify="article_desc"></textarea>
	</div>
</div>

頁面加載JS

<script>
layui.config({
	base: '../layuiadmin/' //靜態資源所在路徑
}).extend({
	index: 'lib/index' //主入口模塊
}).use(['index','form','layedit'], function(){
	var $ = layui.$,
	upload = layui.upload,
	form = layui.form;

	//layedit富文本輸入框引入
	layedit = layui.layedit;
	layedit.set({
		uploadImage: {
			url: '../file/uploadLayeditImage', //接口url
			type: 'post' //默認post
		}
	});
	//建立編輯器
	var index = layedit.build('content',{
		tool: ['strong','italic','underline','del' ,'|','left','center','right','link','unlink','image','face']
	});
	//獲取富文本編輯器的核心代碼就是  1.重新渲染一下表單   2.進行驗證 同步一下 ，進行重新渲染表單
	form.render(null, 'ZX_iframe_submit');  //form表單和提交按鈕中 lay-filter中的值
	//自定義驗證規則
	form.verify({
		article_desc: function(value){
			layedit.sync(index);
		}
	});
</script>	

圖片上傳接口

/**
 * 上傳圖片
 *
 * @param file
 * @param request
 * @param response
 * @return
 */
@RequestMapping("uploadLayeditImage")
@ResponseBody
public BasePageData uploadLayeditImage(@RequestParam(value = "file") MultipartFile file, HttpServletRequest request, HttpServletResponse response) {
	BasePageData data = new BasePageData();
	try {
		String filePath = FileUtil.uploadImage("uploadImage", file, request, response);
		logger.debug("################################filePath#" + filePath);
		Map<String, String> map = new HashMap<>();
		map.put("src",filePath);
		map.put("title", "");
		data.setData(map);
		if (null != filePath) {
			data.setCode(WebResponseCode.SUCCESS);
			data.setMsg("上傳失敗");
		} else {
			data.setCode(WebResponseCode.FAIL);
			data.setMsg("上傳失敗");
		}
	} catch (Exception e) {
		logger.debug("#######上傳文件出現異常:" + e.getMessage());
		e.printStackTrace();
		data.setCode(WebResponseCode.FAIL);
		data.setMsg("上傳失敗!");
	}
	return data;
}

圖片上傳返回字段

BasePageData.java
public class BasePageData {
	private int code;//0表示成功，其它失敗
	private String msg;//提示信息 //一般上傳失敗後返回
	private Object data;// 返回數據信息
}

/**
 * 其中data中包含字段：
 *	 data：{
 *	 "src": "圖片路徑",
 *	 "title": "圖片名稱" //可選
 *	}
 */
public class dataVo{
	private String src;//圖片路徑
	private String title;//圖片名稱[可選]
}

富文本編輯器文檔 - https://www.layui.com/doc/modules/layedit.html

kz.layedit 富文本編輯器拓展：https://fly.layui.com/extend/layedit/