CKFinder 2.x入門

8363 ワード
ckfinder
CKFinderは強力なブラウザベースのajaxファイル管理ツールで、通常はCKEditorと統合して使用します.もちろん単独で使用することもできます.CKFinderは複数の言語をサポートしています.公式サイトの住所はhttp://ckfinder.com/です.現在彼のjava版はすでに発表されていますが、CKEditorと違って、CK Finderは有料です.licenseを購入しないと、プレゼンテーションを学ぶだけで、商業用途には使えません.
 
一、ダウンロードとインストール
 
http://ckfinder.com/downloadはjava版のダウンロードを選択しています.(2011年5月30日にリリースされた2.2.2.2.2.1です.)解凍後、中に「_sources」フォルダと「CKFinderJava.war」のwarパッケージがあります.このwarバッグを展開できます.中にはいくつかの例とCK Finderの関連リンクがあります.その後、「_sources\CK Finder for Java\WebApp\src\main\webapp」の中で、または直接に「CKFinderJava.war」のカバンを開けて、必要なものを見つけて、次のように操作してもいいです.
  ckfinder （ WebRoot\ckfinder）CKFinder WEB-INF下のconfig.xmlファイルをあなたのプロジェクトのWEB-INFフォルダにコピーします.WEB-INF/lib jar WEB-INF/lib を
CKFinder web.xml web.xml を
<servlet>
	<servlet-name>ConnectorServlet</servlet-name>
	<servlet-class>com.ckfinder.connector.ConnectorServlet</servlet-class>
	<init-param>
		<param-name>XMLConfig</param-name>
		<param-value>/WEB-INF/config.xml</param-value>
	</init-param>
	<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
	<servlet-name>ConnectorServlet</servlet-name>
	<url-pattern>
		/ckfinder/core/connector/java/connector.java
	</url-pattern>
</servlet-mapping>
 
デフォルトでは、安全性を考慮して、CKfinederは禁止されています.CK Finderを有効にするには、config.xmlの<enabled> true。CKFinder checkAuthentication 。 142 142を有効にします.
 
二、jsp方式でCKFinderの実例を作成する
 
CK Finderが単独で使用する場合、jspでその例を作成することができます.
 
まずはjspページにCKFinderタグライブラリを導入します.
  
<%@ taglib uri="http://ckfinder.com" prefix="ckfinder" %>
 
次に、下記のコードによって必要な位置にCKFinderのインスタンスを作成することができます.
  
<ckfinder:ckfinder basePath="/CKEditor_test/ckfinder/" />
 
ここで、basePathは唯一の必須パラメータであり、例示的な長さ、幅などの他のパラメータ構成をここで指定しても良い.
  
<ckfinder:ckfinder basePath="/CKEditor_test/ckfinder/" width="700" height="500" />
 
三、整理CKEditor
 
    CKEditorを統合する3つの方法があります.必要に応じて1つを選んでください.
  <ckfinder:setupCKEditor>  
    <ckfinder:setupCKEditor>タグを使ってCKEditorを統合する場合、CK FinderがCKEditorに成功的にインストールされ、/WEB-INF/lib ckeditor-java-core-3.x.jar （ http://ckeditor.com/download CKEditor for Java zip ）。 142 142において
  <ckfinder:setupCKEditor> ：basePath - ， CK Finderフォルダパスです.editor - ， CKEditorのインスタンス名は、指定されていない場合、現在のページのすべてのCKEditorのインスタンスと統合されます.flashType - ， CK Finderにおける「Flash」タイプのリソースtypeの名前.imageType - ， CK Finderにおける「Images」タイプのリソースtypeの名前.
  <ckfinder:setupCKEditor>は、<ckeditor>ラベルの前に挿入されなければならない.例えば:
  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@page pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%>
<%@ taglib uri="http://ckeditor.com" prefix="ckeditor" %>
<%@ taglib uri="http://ckfinder.com" prefix="ckfinder" %>
<html xmlns="http://www.w3.org/1999/xhtml">
	<body>
		<form action="display.jsp" method="post">
			<textarea cols="80" id="editor1" name="editor1" rows="10"></textarea>				
			<input type="submit" value="Submit" />
		</form>
		<ckfinder:setupCKEditor basePath="/CKEditor_test/ckfinder/" editor="editor1" />
		<ckeditor:replace replace="editor1" basePath="/CKEditor_test/ckeditor/" />
	</body>	
</html>
 
 
CKFinder.setupCKEditorにより集積する.
 
まず、ページにckeditor.jsとckfinder.js 。を導入する必要があります.
 
setupCK Editorは4つのパラメータを受け入れます.
  
CKFinder.setupCKEditor( editorObj, config[, imageType, flashType] )
  editorObj - CKEditorの例は、指定されていない場合、現在のページのすべてのCKEditorのインスタンスと統合されます.config - ， CK FinderのbasePath。imageType - は、Image ProptiesダイアログからCK Finderを起動するとき、typeで指定された名前です.flashType - Flash ProptiesダイアログからCK Finderを起動するとき、typeで指定された名前です.
 
例1
 
以下の例は、CKFinderとeditor1 CKFinderの ase pathをどのようにして表現しているかを示している.
  
var editor = CKEDITOR.replace( 'editor1' );
CKFinder.setupCKEditor( editor, '/CKEditor_test/ckfinder/' );
 
例2
 
第二のパラメータは、bであってもよい.
  
var editor = CKEDITOR.replace( 'editor1' );
CKFinder.setupCKEditor( editor, { basePath : '/CKEditor_test/ckfinder/', rememberLastFolder : false } ) ;
 
例3
 
最初のパラメータがnullである場合、CK Finderは全てのCKEditorと一体化することができる.
  
CKFinder.setupCKEditor( null, '/CKEditor_test/ckfinder/' );
var editor = CKEDITOR.replace( 'editor1' );
  。CKEditorにおいて、手作り整理CK Finder
 
まず、ページに “_samples” 。とckeditor.jsを導入する必要があります.
  
CKEDITOR.replace( 'editor1' ,
{
	filebrowserBrowseUrl : '/CKEditor_test/ckfinder/ckfinder.html',
	filebrowserImageBrowseUrl : '/CKEditor_test/ckfinder/ckfinder.html?type=Images',
	filebrowserFlashBrowseUrl : '/CKEditor_test/ckfinder/ckfinder.html?type=Flash',
	filebrowserUploadUrl : '/CKEditor_test/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Files',
	filebrowserImageUploadUrl : '/CKEditor_test/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Images',
	filebrowserFlashUploadUrl : '/CKEditor_test/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Flash',
	filebrowserWindowWidth : '1000',
	filebrowserWindowHeight : '700'
}		
);
  ckfinder.js 。 CKEditor ， CKFinder 。 CKEditorの「アップロード」タブページが直接サーバにファイルをアップロードする場合、 コマンドパラメータを設定する必要があります. QuickUpload設定が完了したら、異なる種類のリソース設定に指定されたアップロードサブフォルダがあります.
  
CKEDITOR.replace( 'editor1' ,
{
	filebrowserBrowseUrl : '/CKEditor_test/ckfinder/ckfinder.html',
	filebrowserImageBrowseUrl : '/CKEditor_test/ckfinder/ckfinder.html?type=Images',
	filebrowserFlashBrowseUrl : '/CKEditor_test/ckfinder/ckfinder.html?type=Flash',
	filebrowserUploadUrl : '/CKEditor_test/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Files&currentFolder=/archive/



',
	filebrowserImageUploadUrl : '/CKEditor_test/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Images&currentFolder=/cars/



',
	filebrowserFlashUploadUrl : '/CKEditor_test/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Flash',
	filebrowserWindowWidth : '1000',
	filebrowserWindowHeight : '700'
}		
);
 
指定されたサブフォルダは、サーバ上に既に存在する必要があります(上記の例ではfilebrowserUploadUrl 及びarchiveフォルダ).
 
 
九、Spring 3.0が提供する表現言語(SpEL)
Spring Boot 2.0.3 Spring data jpaを統合し、添削の機能を実現しました.