CKEditor + CKFinder 基本配置設定之二

本文說明CKFinder 整合到CKEditor裡的基本配置設定
使用Java語言。
前題需參考 CKEditor + CKFinder 基本配置設定之一

一、配置CKFinder js 主檔
檔案：ckfinder/ckfinder.js
在html/jsp頁上載入ckfinder.js
<script src="ckfinder/ckfinder.js"></script>
圖1

二、設定CKFinder config js 主檔
檔案：ckfinder/config.js
圖2 加入中文化 config.language = 'zh-tw';

其它設定參考：Server Side Configuration




三、CKEditor Integration 整合
參考：CKEditor Integration


本文使用JavaScript整合，主要API為CKFinder.setupCKEditor
var editor = CKEDITOR.replace( 'editor1' );
CKFinder.setupCKEditor( editor, '/ckfinder/' );
'editor1' 是你的textarea id/name
圖3

四、設定ckeditor browser url

filebrowserBrowseUrl : 'ckfinder/ckfinder.html',
filebrowserImageBrowseUrl : 'ckfinder/ckfinder.html?type=Images', 
filebrowserFlashBrowseUrl : 'ckfinder/ckfinder.html?type=Flash',
filebrowserUploadUrl : 'ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Files', 
filebrowserImageUploadUrl : 'ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Images', 
filebrowserFlashUploadUrl : 'ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Flash' 

各url為 ckfinder/ 為基礎。依專案配置不同自訂調整。
圖4

五、測試
5.1 啟動tomcat
http://localhost:8081/CKEditorTest7/index.html
圖5-1

5.2 點選 圖像
圖5-2

5.3 進入影像屬性介面
圖5-3 影像資訊 -> 瀏覽伺服器

5.4 進入 上傳圖片 瀏覽伺服器
圖5-4 進入 ckfinder 上傳圖片介面

5.5 載入圖片
圖5-5 點選一張圖片，會載入圖片影像屬性
會有基本資訊：URL、寬度高度、預覽。

5.6 載入到CKEditor 編輯頁
圖5-6 按下確定後->載入到CKEditor 編輯頁

太好了!到了這裡你成功整合CKEditor及CKFinder了喔!


下載本文測試專案 CKEditorTest7

其它文章

CKEditor + CKFinder 基本配置設定之一

本文說明CKFinder 整合到CKEditor裡的基本配置設定
使用Java語言。
前題需CKEditor配置：

• CKEditor 下載
• CKEditor 基本設定

一、CKFinder 下載
參考上一篇： CKFinder 下載
下載 CKFinder 檔名：ckfinder_java_2.6.1.zip

二、配置CKFinder for Java
本文專案使用eclipse maven Web 專案。
JVM：JDK1.7
Server：Tomcat v7.0
使用Jsp、Servlet 之 Java Web 專案
本文專案名稱為CKEditorTest7


三、取得配置CKFinder war檔
下載檔解壓縮後
ckfinder_java_2.6.1\ckfinder\CKFinderJava-2.6.1.war
找到CKFinderJava-2.6.1.war此檔。(2.6.1 是版本號，依你下載的版本號為主)
解壓縮CKFinderJava-2.6.1.war
圖3 解壓縮後資料夾CKFinderJava-2.6.1
ckfinder
META-INF
WEB-INF
welcome.html

四、配置複製 ckfinder
4.1 複製 ckfinder 資料夾到Java web專案裡webapp下
圖4-1

4.2 複製 lib資料夾到Java web專案裡webapp/WEB-INF下
圖4-2

4.3 複製 config.xml到Java web專案裡webapp/WEB-INF下
圖4-3

五、配置設定 ckfinder

5.1 設定啟用ckfinder，修改WEB-INF/config.xml
ckfinder預設是禁用的為false，需改為啟用true。
<enabled>true</enabled>
圖5-1

5.2 設定上傳檔案資料夾位置 baseDir and baseUrl
baseDir為檔案資料夾位置
本文暫不設定，上傳到webapp預設位置。
(因為baseDir另文說明。)
baseUrl為在web中的url連結
<baseURL>http://localhost:8081/CKEditorTest7/userfiles/</baseURL>
圖5-2

5.3 設定 license
ckfinder 是需付費使用的。
<licenseKey></licenseKey>
<licenseName></licenseName>
本文就不對這點說明了。

六、配置 web.xml
本文只直接複製web.xml
CKFinderJava-2.6.1\WEB-INF\web.xml -> CKEditorTest7\src\main\webapp\WEB-INF\web.xml

主要設定：
配置主要進入點 ConnectorServlet ，這一定要配置，不然就無法上傳檔案了喔!!

 <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/config.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/core/connector/java/connector.java
  </url-pattern>
 </servlet-mapping>

七、測試前準備
測試前複製 welcome.html 到
CKFinderJava-2.6.1\welcome.html -> CKEditorTest7\src\main\webapp\welcome.html

圖7-1 確認測試資料是否存在。
_samples是ckfinder的範例測試資料夾。

八、測試
8.1 啟動tomcat 後輸入
http://localhost:8081/CKEditorTest7/welcome.html
圖8-1

8.2 進入測試範例主頁
http://localhost:8081/CKEditorTest7/ckfinder/_samples/index.html
圖8-2

8.3 測試範例分為二大範例
1、使用JavaScript 來啟用CKFinder。
2、使用Java來啟用CKFinder。
主要重點範例：Standalone
圖8-3

九、測試上傳檔案
9.1 進入Standalone 主頁
圖9-1

9.2 點選上傳檔案
圖9-2 選Images -> 上傳檔案 -> 點選要上傳的圖片 -> 開啟舊檔

9.3 上傳成功
圖9-3

其它的範例及功能就自已玩了，這裡就不多說明了。

如無法上傳檔案可能配置有誤，請往上項次核對配置。

十、本文下載點請接續下一篇
請先完成本篇設定及以下測試喔!

接續下一篇：
CKEditor + CKFinder 基本配置設定之二

其它文章

CKFinder 下載

本文說明：
CKFinder 是一套上傳檔案的套件。

一、進入CKFinder 下載

本文使用JAVA程式來配合說明，故本文下載JAVA版本
圖1

二、CKFinder支援JAVA版本
不同支援語言版本會不同。
本文下載
JAVA版本 Version: 2.6.1
選 zip 下載。
檔名：ckfinder_java_2.6.1.zip
圖2 下載後解壓縮

三、CKFinder 資料夾說明
圖3

解壓縮\ckfinder_java_2.6.1\
進入資料夾 ckfinder
內有四個資料檔
1、_source
CKFinder原始碼
2、CKFinderJava-2.6.1.war
CKFinder web war 檔
3、install.txt
說明文件
4、license.txt
License文件

四、CKFinder版本說明
https://cksource.com/ckfinder/whatsnew
圖4 官網版本說明，這是全版本說明

另外CKFinder版本下載檔中，
也有版本說明更新記錄 CKFinder Changelog

檔案位置：
_source\CKFinder for Java\WebApp\src\main\webapp\ckfinder\changelog.txt
圖4-2

五、CKFinder demo
CKFinder線上範例

圖5

六、CKFinder 2.x - Documentation
http://docs.cksource.com/CKFinder_2.x/Developers_Guide
圖6 CKFinder for Java

七、CKFinder 基本需求
Browsers：
Google Chrome
Firefox
Internet Explorer 8+
Safari
Opera

Server：
JRE 1.6 and a Servlet 2.5/JSP 2.1 compliant server.
詳參考：System Requirements  
圖7

   


下一篇：
CKEditor + CKFinder 基本配置設定

其它文章

CKEditor get set 存取資料

本文主要說明CKEditor 取得編輯內容資料及初值設定編輯內容

一、存取資料主要了解 editor instance
CKEditor 4 Documentation
http://docs.ckeditor.com/#!/api/CKEDITOR.editor
圖1

二、setData
圖2
http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-setData

程式基本寫法：
CKEDITOR.instances.editor1.setData( '<p>This is the editor data.</p>' );


三、getData
圖3
http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-getData

程式基本寫法：
CKEDITOR.instances.editor1.getData()

四、程式

index_get_set.html

<!DOCTYPE html>
 <html>
  <head>
 <meta charset="utf-8">
 <script src="js/jquery.min.1.11.1.js"></script>
 <script src="ckeditor_4.5.7/ckeditor.js"></script>
 <link rel="stylesheet" href="ckeditor_4.5.7/contents.css">
 <script type="text/javascript">
  $(document).ready(function() {
   var editor = CKEDITOR.replace('content');
   console.log("ready!");
   CKEDITOR.instances.content.setData( '<p>This is the editor data.</p>' );
   console.log(CKEDITOR.instances.content.getData());
  });
 </script>
   </head>
 <body>
  <h2>Hello World!</h2>
  <form id="detaform" method="post">
   <textarea id="content" name="content"></textarea>
  </form>
 </body>
 </html>

圖4

五、測試
圖5

六、 重點問題
本文中的instances 後接 content 是不是跟官網說明文件不一樣。
官網說明：
CKEDITOR.instances.editor1.setData()
CKEDITOR.instances.editor1.getData()

本文：
CKEDITOR.instances.content.setData()
CKEDITOR.instances.content.getData()

重點本文content 及 editor1 為什麼會不一樣，還可以執行呢?

因為本文textarea 名稱宣告為content。

   var editor = CKEDITOR.replace('content');
  ....
  <form id="detaform" method="post">
    <textarea id="content" name="content"></textarea>
  </form>
  

如果改為 editor1 需改幾個地方

  var editor = CKEDITOR.replace('editor1');
  ....
  <form id="detaform" method="post">
    <textarea id="editor1" name="editor1"></textarea>
  </form>
  

則取存資料：
CKEDITOR.instances.editor1.setData()
CKEDITOR.instances.editor1.getData()

所以要注意你的textarea 的id 、name的名稱喔!!

程式：

index_get_set_2.html

  <!DOCTYPE html>
  <html>
   <head>
  <meta charset="utf-8">
  <script src="js/jquery.min.1.11.1.js"></script>
  <script src="ckeditor_4.5.7/ckeditor.js"></script>
  <link rel="stylesheet" href="ckeditor_4.5.7/contents.css">
  <script type="text/javascript">
   $(document).ready(function() {
    var editor = CKEDITOR.replace('content');
    console.log("ready!");
    CKEDITOR.instances.content.setData( '<p>This is the editor data.</p>' );
    console.log(CKEDITOR.instances.content.getData());
   });
  </script>
    </head>
  <body>
   <h2>Hello World!</h2>
   <form id="detaform" method="post">
    <textarea id="content" name="content"></textarea>
   </form>
  </body>
  </html>
  

測試：
圖6

下載本文測試專案 CKEditorTest5


下一篇：
CKFinder 下載

其它文章

CKEditor plugins 增加套件

本文說明CKEditor plugins 套件。
在CKEditor的功能，都是套件化。

一、功能
圖1 本文用表格功能來說明增加套件

二、表格功能
圖2

三、進入CKEditor 官網，增加套件
Add-ons -> Plugins
http://ckeditor.com/addons/plugins/all
圖3

四、選Quicktable查件
http://ckeditor.com/addon/quicktable
圖4

五、下載
Version: 1.0.6
圖5

圖6 記下config
config.extraPlugins = 'quicktable';

六、解壓檔
本文下載 quicktable_1.0.6.zip
圖7

圖8 改資料夾為quicktable

七、配置
將quicktable資料夾，複製到web專案下ckeditor_4.5.7/plugins/下
圖9

八、設定
在config.js 裡新增
config.extraPlugins = 'quicktable';
圖10

九、執行成果
圖11

圖12

十、加入quicktable配置
圖13

quicktable配置，如果不設定，會自動使幅預設的設定。

CKEDITOR.replace( 'content', {
         qtRows: 20, // Count of rows
         qtColumns: 20, // Count of columns
         qtBorder: '1', // Border of inserted table
         qtWidth: '90%', // Width of inserted table
         qtStyle: { 'border-collapse' : 'collapse' },
         qtClass: 'test', // Class of table
         qtCellPadding: '0', // Cell padding table
         qtCellSpacing: '0', // Cell spacing table
         qtPreviewBorder: '4px double black', // preview table border 
         qtPreviewSize: '4px', // Preview table cell size 
         qtPreviewBackground: '#c8def4' // preview table background (hover)
     });

index.html內容

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CKEditor Sample</title>
<script src="js/jquery.min.1.11.1.js"></script>
<script src="ckeditor_4.5.7/ckeditor.js"></script>
<link rel="stylesheet" href="ckeditor_4.5.7/contents.css">
<script type="text/javascript">
 $(document).ready(function() {
  console.log("ready!");
  CKEDITOR.replace( 'content', {
         qtRows: 20, // Count of rows
         qtColumns: 20, // Count of columns
         qtBorder: '1', // Border of inserted table
         qtWidth: '90%', // Width of inserted table
         qtStyle: { 'border-collapse' : 'collapse' },
         qtClass: 'test', // Class of table
         qtCellPadding: '0', // Cell padding table
         qtCellSpacing: '0', // Cell spacing table
         qtPreviewBorder: '4px double black', // preview table border 
         qtPreviewSize: '4px', // Preview table cell size 
         qtPreviewBackground: '#c8def4' // preview table background (hover)
     });
 });
</script>
</head>
<body>
 <form id="detaform" method="post">
  <textarea id="content" name="content"></textarea>
 </form>
</body>
</html>

圖14

下一篇：

• CKEditor get set 存取資料

其它文章