JavaScript 使用Ckeditor+Ckfinder檔案上傳案例詳解
阿新 • • 發佈：2021-08-26
目錄
- 一、準備工作
- 二、解壓
- 三、開始整合
一、準備工作
Ckeditor_4.5.7_full + Ckfinder__2.6.0
二、解壓
1.解壓ckeditor，和平常檔案解壓相同，正常解壓即可
2.解壓ckfinder，解壓完成後進入ckfinder資料夾下，發現有CKFinderJava-2.6.0.wBtzalrQVwwar檔案，繼續解壓。
3.注意看紅框部分
三、開始整合
1.準備工作完成，將圖1中的ckeditor，及圖3中的ckfinder資料夾拷貝到我們自己的專案的WebContent下。我在WebContent下新建了資料夾assets。
2.新建p頁面
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path;
%>
<c:set var="base" value="<%=basePath%>"></c:set>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- 引入ckeditor.js和ckfinder.js -->
<script type="text/" src="${base }/assets/ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="${base }/assets/ckfinder/ckfinder.js"></script>
<title>ckeditor</title>
</head>
<body>
${base }
<p>
<h1>${msg }</h1>
<form>
<textarea name="editor1" id="editor1" rows="10" cols="80">
This is my textarea to be replaced with CKEditor.
</textarea>
</form>
<!-- 將id為www.cppcns.com
此時我們已經可以看到富文字編輯器。
3.進入如圖所示目錄下，將config.xml複製到我們自己專案的WEB-INF下，我將檔案更名為ckfinder.xml，並將lib下的jar包匯入。
4.修改ckfinder.xml
basedir 為檔案儲存的物理路徑，就是我們專案在自己的電腦上執行時，找到專案執行路徑，然後自己想要儲存的位置。（表述不清楚可以私信~）
5.修改ckeditor下的config.js檔案
CKEDITOR.wBtzalrQVweditorConfig = function( config ) {
config.height = 300;
config.enterMode = CKEDITOR.ENTER_BR;// 去掉<p>
config.shiftEnterMode = CKEDITOR.ENTER_BR;// 去掉<p>
config.toolbarCanCollapse = true; //工具欄可摺疊
config.toolbarGroups = [
{ name: 'document',groups: [ 'mode','document','doctools' ] },{ name: 'clipboard',groups: [ 'clipboard','undo' ] },{ name: 'forms',groups: [ 'forms' ] },{ name: 'paragraph',groups: [ 'list','indent','blocks','align','bidi','paragraph' ] },{ name: 'editing',groups: [ 'find','selection','spellchecker','editing' ] },{ name: 'insert',groups: [ 'insert' ] },'/',{ name: 'styles',groups: [ 'styles' ] },{ name: 'basicstyles',groups: [ 'basicstyles','cleanup' ] },{ name: 'colors',groups: [ 'colors' ] },{ name: 'others',groups: [ 'others' ] },{ name: 'links',groups: [ 'links' ] },{ name: 'about',groups: [ 'about' ] },{ name: 'tools',groups: [ 'tools' ] }
];
config.removeButtons = 'About,Flash,Form,Checkbox,Radio,TextField,Textarea,Select,Button,ImageButton,HiddenField,NewPage,Templates,Scayt,Language,Smiley,Iframe,Save,SelectAll,CreateDiv,BidiRtl,BidiLtr,ShowBlocks';
var p='/Ckeditor/assets/';
config.filebrowserBrowseUrl =p+'ckfinder/ckfinder.html';
config.filebrowserImageBrowseUrl = p+'ckfinder/ckfinder.html?type=Images';
config.filebrowserFlashBrowseUrl = p+'ckfinder/ckfinder.html?type=Flash';
config.filebrowserUploadUrl =p+'ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Files';
config.filebrowserImageUploadUrl =p+'ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Images';
config.filebrowserFlashUploadUrl = p+'ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Flash';
};6.在web.xml中新增如下程式碼
<servlet>
<servlet-name>ConnectorServlet</servlet-name>
<servlet-class>com.ckfinder.connector.ConnectorServlet</servlet-class>
<init-param>
<description>
Path to configuration file can be relative path inside application,absolute path on local file systemwww.cppcns.com or UNC path.
</description>
<param-name>XMLConfig</param-name>
<param-value>/WEB-INF/ckfinder.xml</param-value>
</init-param>
<init-param>
<param-name>debug</param-name>
<param-value>false</param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>ConnectorServlet</servlet-name>
<url-pattern><!--此路徑找到專案下ckfinder資料夾即可-->
/assets/ckfinder/core/connector/java/connector.java
</url-pattern>
</servlet-mapping>
7.執行檢視效果。
到此這篇關於JavaScript 使用Ckeditor+Ckfinder檔案上傳案例詳解的文章就介紹到這了,更多相關JavaScript 使用Ckeditor+Ckfinder檔案上傳內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！