富文字編譯器如何使用詳細講解
1.為什麼使用富文字編譯器？
方便開發！！！
2.什麼是富文字編譯器
類似 csdn這樣的具有多功能的一種檔案處理工具
3.程式開發中如何使用
3.1下載下來的KindEditor檔案解壓直接複製到專案的webapp目錄中
3.2在jsp中引入KindEditor的css和js程式碼以及jquery（注意jq在前面）
<link href="kindeditor-4.1.10/themes/default/default.css" type="text/css" rel="stylesheet">
<script src="jquery-1.10.2.min.js"></script>
<script type="text/javascript" charset="utf-8" src="kindeditor-4.1.10/kindeditor-all-min.js"></script>
<script type="text/javascript" charset="utf-8" src="kindeditor-4.1.10/lang/zh_CN.js"></script>
3.3在表單中新增一個textarea控制元件。是一個富文字編輯器的載體。類似資料來源。有個id用與選擇
3.4初始化富文字編輯器。使用官方提供的方法初始化（js處理 程式碼如下）
<script type="text/javascript" >
var kingEditorParams ={
filePostName : "file",//指定上傳檔案引數名稱
uploadJson:'upload3.html',//指定上傳檔案請求的url。
dir:"image"//上傳型別，分別為image、flash、media、file
}
var editor;
$(function () {
editor=KindEditor.create($("#myeditor"),kingEditorParams);
})
</script>
3.5最終的jsp舉例頁面全部程式碼如下
<%--
Created by IntelliJ IDEA.
User: lph
Date: 2018/10/22
Time: 15:54
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<link href="kindeditor-4.1.10/themes/default/default.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript" charset="utf-8" src="kindeditor-4.1.10/kindeditor-all-min.js"></script>
<script type="text/javascript" charset="utf-8" src="kindeditor-4.1.10/lang/zh_CN.js"></script>
</head>
<body>
<form action="editor.html" method="post">
<textarea id="myeditor" name="content"></textarea>
<input type="submit" value="提交"/>
</form>
<script type="text/javascript" >
var kingEditorParams ={
filePostName : "file",//指定上傳檔案引數名稱
uploadJson:'upload3.html',//指定上傳檔案請求的url。
dir:"file"//上傳型別，分別為image、flash、media、file
}
var editor;
$(function () {
editor=KindEditor.create($("#myeditor"),kingEditorParams);
})
</script>
</body>
</html>
3.6 controller層
@RequestMapping("upload3.html")
@ResponseBody
public String uploadDemo3(@RequestParam("file") MultipartFile file){
try {
String fileName = file.getOriginalFilename();
String extName =fileName.substring(fileName.lastIndexOf("."));
String newName = System.currentTimeMillis()+extName;
FileUtils.copyInputStreamToFile(file.getInputStream(),new File("E:/demo/"+newName));
//中間是0代表上傳成功 demo是idea中配置的虛擬檔案路徑
return "{\"error\":0,\"url\":\"http://localhost:8080/demo/" + newName + "\"}";
} catch (IOException e) {
e.printStackTrace();
//有異常中間是1
return "{\"error\":1,\"url\":\"\"}";
}
}
@RequestMapping("editor.html")
public String demo(String content ,Model model){
System.out.println(content);
//模擬存到資料庫並取出來顯示
model.addAttribute("content",content);
return "detail.jsp";
}
提醒：因為會使用到json，所有記得springMVC-config中配置返回型別轉換器以及匯入json的jar
<mvc:annotation-driven content-negotiation-manager="contentNegotiationManagerFactoryBean"/>
<!--配置返回值轉換器-->
<bean id="contentNegotiationManagerFactoryBean"
class="org.springframework.web.accept.ContentNegotiationManagerFactoryBean">
<!--是否支援字尾匹配-->
<property name="favorPathExtension" value="false"/>
<!--是否支援引數匹配-->
<property name="favorParameter" value="false"/>
<!--是否accept-header匹配-->
<property name="ignoreAcceptHeader" value="false"/>
<property name="mediaTypes">
<map>
<!--表示.json結尾的請求返回json-->
<entry key="json" value="application/json"/>
<!--<entry key="xml" value="application/xml"/>-->
</map>
</property>
</bean>
個人java資源分享公眾號 java一號