SpringMVC整合富文字編輯器

楓葉梨花發表於2019-04-18
SpringMVC

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

如需使用，可訪問官網。

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

後端開發

因為涉及到上傳圖片，所以需要上傳配置。

後端上傳配置

1、上傳所需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>
複製程式碼

2、SpringMVC的xml 配置

<!-- 檔案上傳解析器 -->
<bean id="multipartResolver"
   class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
   <!-- 設定上傳檔案的最大尺寸為5MB -->
   <property name="maxUploadSize">
   	<value>5242880</value>
   </property>
</bean>
複製程式碼

3、程式碼編寫

@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使用簡單方便，而且介面清爽很乾淨，非常推薦使用。

相關文章