記錄一次使用Ckeditor+Ckfinder實現檔案上傳

阿新 • • 發佈：2019-01-21

一、準備工作

Ckeditor_4.5.7_full + Ckfinder_java_2.6.0

二、解壓

1.解壓ckeditor，和平常檔案解壓相同，正常解壓即可

2.解壓ckfinder，解壓完成後進入ckfinder資料夾下，發現有CKFinderJava-2.6.0.war檔案，繼續解壓。
這裡寫圖片描述
3.注意看紅框部分

三、開始整合

1.準備工作完成，將圖1中的ckeditor，及圖3中的ckfinder資料夾拷貝到我們自己的專案的WebContent下。我在WebContent下新建了資料夾assets。
這裡寫圖片描述
2.新建jsp頁面

<%@ 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/javascript" 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為editor1的textarea用ckeditor來操作 -->
    <script type="text/javascript">
        var editor = CKEDITOR.replace( 'editor1' );
        CKFinder.setupCKEditor(editor, '${base }/assets/ckfinder/');
    </script>
</body>
</html>

此時我們已經可以看到富文字編輯器。
3.進入如圖所示目錄下，將config.xml複製到我們自己專案的WEB-INF下，我將檔案更名為ckfinder.xml，並將lib下的jar包匯入。
這裡寫圖片描述
4.修改ckfinder.xml

basedir 為檔案儲存的物理路徑，就是我們專案在自己的電腦上執行時，找到專案執行路徑，然後自己想要儲存的位置。（表述不清楚可以私信~）
5.修改ckeditor下的config.js檔案

CKEDITOR.editorConfig = 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 system 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.執行檢視效果。

記錄一次使用Ckeditor+Ckfinder實現檔案上傳

一、準備工作

二、解壓

三、開始整合

記錄一次使用Ckeditor+Ckfinder實現檔案上傳

CKEditor 整合CKFinder實現檔案上傳及富文字操作

CKEditor與CKFinder整合並實現檔案上傳功能

記錄一次使用eclipse實現git合併分支操作

Http伺服器實現檔案上傳與下載(一)

SpringBoot入門系列篇（十一）：實現檔案上傳

記錄一次詭異的dll檔案函式問題

CKEditor+CKFinder for java (上傳檔案、上傳視訊、新增行距編輯等等)

Spring MVC - MultipartFile實現檔案上傳(單檔案與多檔案上傳)

struts2實現檔案上傳與下載功能

Java Springboot結合FastDFS實現檔案上傳以及根據圖片url將圖片上傳至圖片伺服器

yii框架實現檔案上傳

原生javascript實現檔案上傳功能程式碼

【SSH網上商城專案實戰13】Struts2實現檔案上傳功能

關於myeclipse實現檔案上傳與使用的路徑問題

servlet3.0實現檔案上傳

Extjs+C# 實現檔案上傳

HTTP POST請求報文格式分析與Java實現檔案上傳

JavaScript的FormData+Ajax實現檔案上傳+圖片上傳

springboot(六):spingboot如何實現檔案上傳

記錄一次使用Ckeditor+Ckfinder實現檔案上傳

一、準備工作

二、解壓

三、開始整合

相關推薦