kindeditor-在線編輯器

時間 2019-11-11

標籤 kindeditor 在線編輯器简体版

原文原文鏈接

寫在前面的話：php

今天是第一次寫博客，很值得記念，但願可以和大神們一塊兒交流技術，一塊兒進步。。。來自<一隻有夢想的前端小白>css

最近項目中須要實現圖文混排的效果，因此研究了下在線編輯器-- kindeditor，在此以前也有研究過百度的在線編輯器--ueditor，可是百度的在線編輯器ueditor較 kindeditor 大10倍左右，因此綜合一些緣由最終選擇使用kindeditor。下面分享下kindeditor在java項目中的配置以及運行結果：html

一、去官網 http://kindeditor.net/down.php 下載 KindEditor 4.1.11 (2016-03-31) [1143KB] 前端

二、本文以jsp版本爲例，將下載下來的文件夾刪除asp，asp.net，php文件夾，如圖所示java

三、將文件夾放入eclipse下的項目中，如圖所示(圖中個人kindedtior 文件夾根據本身的本身的須要稍做了修改)jquery

四、須要把jsp下面lib下的三個包，如圖所示：git

拷進項目的lib下面，而且要引進去，如圖所示：github

五、如上圖所示，個人kindedtior 文件夾裏面新建了一個kindeudtior.html頁面，其代碼以下：數據庫

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="themes/simple/simple.css"/>
	</head>
<body>
<form name="example" method="post" action="http://localhost:8080/personalWebsiteFront/studentInfo/addNewInfo">
		<textarea id="editor_id1" name="textInfo" style="width:700px;height:300px;">
		</textarea>
		<input type="submit" name="button" value="提交內容" /> (提交快捷鍵: Ctrl + Enter)
</form>
<script charset="utf-8" src="kindeditor-all.js"></script>
<script charset="utf-8" src="lang/zh-CN.js"></script>
<script charset="utf-8" src="js/jquery-1.11.2.min.js"></script>
<script>
        KindEditor.ready(function(K) {
    		// 實例化編輯器1
            editor1 = K.create('#editor_id1',{
            uploadJson : 'jsp/upload_json.jsp',
			fileManagerJson : 'jsp/file_manager_json.jsp',
			allowFileManager : true,   //否開啓【瀏覽服務器】功能
			items:['source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'code', 'cut', 'copy', 'paste',
					'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',
					'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',
					'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/',
					'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold',
					'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image', 'multiimage',
					'flash', 'media', 'insertfile', 'table', 'hr', 'emoticons', 'baidumap', 'pagebreak',
					'anchor', 'link', 'unlink', '|', 'about'
			],themeType : 'simple',
            });
    });
</script>
</body>
</html>

　如上述代碼所示，我配置了服務器，此處省略。。。json

六、到這一步時，若是啓動tomcat運行項目是能夠成功的，可是在插入圖片或者文件時是會出錯的，這是由於文件的保存路徑的問題。下面咱們須要修改jsp文件夾下面的upload_json.jsp文件，如圖所示：

打開upload_json.jsp文件後，有以下圖所示的代碼：

在19和22行的最後都有attached，其指一個文件夾的名稱，前面是路徑，可是在上傳圖片時經過檢查目錄發現，沒有attached文件夾，此時項目不會去新建個attached文件夾，而是直接顯示上傳路徑不存在，因此咱們須要對以上路徑稍做修改，修改後的以下圖所示：

到這一步就能夠完成圖片的上傳，效果如圖所示：

至於圖片以及文件上傳後數據庫怎麼獲取數據，那是屬於後端服務控制的，這裏就不具體介紹了。

但願以上的介紹對您能有所幫助，同時這也是我本身只是內化的過程，感謝博客園平臺！----來自<一隻有夢想的前端小白>