SpringMVC整合富文本編輯器

開發系統的時候，須要整合富文本編輯器功能。我使用的wangEditor，這個編輯器清爽、簡便，該有的功能都有了，很是好用。

如需使用，可訪問官網。

在系統開發中使用SpringMVC整合wangEditor

後端開發

由於涉及到上傳圖片，因此須要上傳配置。

後端上傳配置

一、上傳所需Jar包

<dependency>
   <groupId>commons-fileupload</groupId>
   <artifactId>commons-fileupload</artifactId>
   <version>1.3.3</version>
</dependency>

<dependency>
   <groupId>commons-io</groupId>
   <artifactId>commons-io</artifactId>
   <version>2.4</version>
</dependency>
複製代碼

二、SpringMVC的xml 配置

<!-- 文件上傳解析器 -->
<bean id="multipartResolver"
   class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
   <!-- 設置上傳文件的最大尺寸爲5MB -->
   <property name="maxUploadSize">
   	<value>5242880</value>
   </property>
</bean>
複製代碼

三、代碼編寫

@Value("${info.upload}")
private String path;

@Autowired
private InfomationService infomationService;

@CrossOrigin //跨域訪問
@RequestMapping(value="/save",method=RequestMethod.POST)
@ResponseBody
public Map<String,Object> save(@RequestParam("inputfile") MultipartFile inputfile){
   Map<String,Object> map = new HashMap<>();
   if(!inputfile.isEmpty()){
   	map.put("errno", 0);
   	//設置新的圖片名
   	String fileStr=inputfile.getOriginalFilename();
   	String newFilename=UUID.randomUUID().toString()+
   	            ileStr.substring(fileStr.lastIndexOf("."));
   	//將圖片保存到硬盤
   	try {
   		inputfile.transferTo(new File(path+newFilename));
   	} catch (IllegalStateException | IOException e) {
   		e.printStackTrace();
   	}
   	//文件地址
   	String[] data = new String[]{".../infoimg/"+newFilename};
   	map.put("data", data);
   }
   return map;
}
複製代碼

上面我只提供了單文件上傳，可是編輯器的文件地址是數組類型的。

前端開發

引入JS

script src=".../js/wangEditor.min.js"></script>
複製代碼

wangEditor配置

var E = window.wangEditor;
var editor = new E('#editor');
// 或者 var editor = new E( document.getElementById('editor') )

//後端保存圖片的孩子
editor.customConfig.uploadImgServer = '.../save';
//上傳圖片數量
editor.customConfig.uploadImgMaxLength = 1;
//上傳圖片名稱
editor.customConfig.uploadFileName = 'inputfile';

editor.create();
   
複製代碼

圖片上傳返回數據

{
   // errno 即錯誤代碼，0 表示沒有錯誤。
   //       若是有錯誤，errno != 0，
   //可經過下文中的監聽函數 fail 拿到該錯誤碼進行自定義處理
   "errno": 0,

   // data 是一個數組，返回若干圖片的線上地址
   "data": [
       "圖片1地址",
       "圖片2地址",
       "……"
   ]
}
複製代碼

wangEditor使用簡單方便，並且界面清爽很乾淨，很是推薦使用。