HTML代碼：

這里的原理是你輸入的內容會經過處理插入到文本區域textarea中

js代碼：

/**

* 文本編輯器

*/

layui.use(['form', 'layedit'], function(){

var layedit = layui.layedit;

//上傳圖片,必須放在 創建一個編輯器前面

layedit.set({

uploadImage: {

url: 'upload' //接口url

,type: 'post' //默認post

}

});

//建立編輯器

layedit.build('demo',{

height: 500 //設置編輯器高度

});

});

后臺接口代碼：

/** 上傳圖片方法

* @param request

* @param description

* @param file

* @return

* @throws Exception

*/

@RequestMapping(value="upload")

@ResponseBody

public String uploadFile(HttpServletRequest request,@Param("file") MultipartFile file) throws IOException {

SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMddHHmmssSS");

String res = sdf.format(new Date());

//服務器上使用

// String rootPath =request.getServletContext().getRealPath("/resource/uploads/");//target的目錄

//本地使用

String rootPath ="E:\\bolg";

//原始名稱

String originalFilename = file.getOriginalFilename();

//新的文件名稱

String newFileName = res+originalFilename.substring(originalFilename.lastIndexOf("."));

//新文件

File newFile = new File(rootPath+ File.separator+newFileName);

//判斷目標文件所在的目錄是否存在

if(!newFile.getParentFile().exists()) {

//如果目標文件所在的目錄不存在，則創建父目錄

newFile.getParentFile().mkdirs();

}

System.out.println(newFile);

//將內存中的數據寫入磁盤

file.transferTo(newFile);

//完整的url

String fileUrl = newFileName;

Mapmap = new HashMap();

Mapmap2 = new HashMap();

map.put("code",0);//0表示成功，1失敗

map.put("msg","上傳成功");//提示消息

map.put("data",map2);

map2.put("src",fileUrl);//圖片url

map2.put("title",newFileName);//圖片名稱，這個會顯示在輸入框里

String result = new JSONObject(map).toString();

return result;

}

注意：如果想在編輯器中顯示你上傳的圖片，需要配置tomcat的虛擬路徑

配置虛擬路徑的方法參考這篇文章：https://blog.csdn.net/qq_36750461/article/details/85050946

總結

以上是生活随笔為你收集整理的layui网页html编辑器,layui使用富文本编辑器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。