Froala Editor 在编辑器里上传图片到自己的服务端

最新推荐文章于 2024-10-09 09:21:53 发布

SHELLY_90

最新推荐文章于 2024-10-09 09:21:53 发布

阅读量1.7w

点赞数 3

本文链接：https://blog.csdn.net/shi_longyan/article/details/51603632

版权

Froala Editor 控件看起来比较简单，在html 可以用div 占位，也可以用textarea 占位放到textarea 里面，可以直接用form 表单直接提交textare里的数据。

下面例子就是这种。

备注: Froala Editor 官网地址: https://www.froala.com/wysiwyg-editor/docs/plugins

1.添加html 标签

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" />

	<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>

3. JS 脚本初始化

$(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.效果图