Froala Editor 在編輯器裡上傳圖片到自己的服務端
阿新 • • 發佈：2019-01-26
Froala Editor 控制元件看起來比較簡單，在html 可以用div 佔位，也可以用textarea 佔位 放到textarea 裡面，可以直接用form 表單直接提交textare裡的資料。
下面例子就是這種。
1.新增html 標籤
<textarea id='editor' name="content" style="margin-top: 30px;" ></textarea>
2.新增Froala Editor 引入 css 和js
<span style="white-space:pre"> </span><link th:href="@{|/static/froala_editor/css/froala_editor.min.css|}" rel="stylesheet" /> <link th:href="@{|/static/froala_editor/css/froala_style.min.css|}" rel="stylesheet" /> <link th:href="@{|/static/froala_editor/css/plugins/colors.min.css|}" rel="stylesheet" /> <link th:href="@{|/static/froala_editor/css/plugins/image.min.css|}" rel="stylesheet" />
3. JS 指令碼初始化<span style="white-space:pre"> </span><script th:src="@{|/static/froala_editor/js/froala_editor.min.js|}"></script> <script th:src="@{|/static/froala_editor/js/plugins/image.min.js|}"></script> <script th:src="@{|/static/froala_editor/js/languages/zh_cn.js|}"></script>
$(function (){ //編輯器初始化並賦值 $('#editor').on('froalaEditor.initialized', function (e, editor) { var content = [[${cmsInfo != null} ? ${cmsInfo.content}]]; if(content){ $("#editor").froalaEditor('html.set', content); } }).froalaEditor({ placeholderText: '請輸入內容', charCounterMax: 3000, imageUploadURL: "uploadImgEditor", enter: $.FroalaEditor.ENTER_BR, language: 'zh_cn', toolbarButtons: [ 'bold', 'italic', 'underline', 'paragraphFormat', 'align','color','fontSize','insertImage','insertTable','undo', 'redo' ] });
注意跟上傳圖片相關的就是 imageUploadURL 屬性,我這裡上傳的URL 為 uploadImgEditor.下面看一下後臺程式碼。
4.後臺程式碼
/**
* 上傳Froala Editor 圖片
* @throws Exception
*/
@RequestMapping("uploadImgEditor")
@ResponseBody
Map<String, String> uploadImgEditor(MultipartHttpServletRequest request, Model model) throws Exception {
CommonsMultipartFile orginalFile = (CommonsMultipartFile) request.getFile("file");
Map<String, String> map = new HashMap<>();
String path = "/upload/froala_editor";
String url = "";
String fileType=FileUtil.getFileNameFullExtension(orginalFile.getOriginalFilename());
try {
url = FileUtil.uploadFileAllType(orginalFile, path,fileType);
map.put("link", url);
} catch (Exception e) {
}
return map;
}需要返回HashMap 格式的，且形如
{"link":"http://i.froala.com/images/missing.png"}
上面的方法，可以滿足這樣的條件，不是這樣的格式，會報錯。
不是上傳到本地的 在引入的js裡 有預設的上傳路徑 ：imageUploadURL:"http://i.froala.com/upload"，
大家可以訪問這個路徑，會得到上面的那樣格式的返回資料。
5.效果圖
