Java程式教學甘仔店: CKEditor

顯示具有 CKEditor 標籤的文章。顯示所有文章

2016年5月3日星期二

CKEditor contentPreview Event

本文說明預覽(Preview)文件功能事件

一、前題查看是否有預覽(Preview)的套件

下載預覽(Preview)的套件
http://ckeditor.com/addon/preview
如何安裝套件這裡不多說，在另一篇有說明。
請參考：
CKEditor plugins 增加套件

二、說明文件
contentPreview Event官網說明文件

三、程式
主要程式：

editor.on('contentPreview', function(evt) {
   console.log(evt.data.dataValue);
   console.log("contentPreview");
 });

程式檔：index4.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 src="ckfinder/ckfinder.js"></script>
 <script type="text/javascript">
  $(document).ready(function() {
   var editor = CKEDITOR.replace('content');
   CKFinder.setupCKEditor(editor, 'ckfinder/');
   editor.on('contentPreview', function(evt) {
    console.log(evt.data.dataValue);
    console.log("contentPreview");
   });
   editor.on('blur', function(evt) {
    console.log("blur");
   });
   editor.on('focus', function(evt) {
    console.log("focus");
   });
   console.log("ready!");
  });
 </script>
 </head>
 <body>
  <h2>Hello World!</h2>
  <form id="detaform" method="post">
   <textarea id="content" name="content"></textarea>
  </form>
 </body>
 </html>

測試：
圖3

CKEditor contentPreview Event 預覽 Preview

下載專案 CKEditorTestE

其它文章

CKEditor change blur focus Event

jQuery 事件還有很多，本文拿幾個來測試：

一、本文主要在 change 、 blur 及 focus 事件說明：

change ：當CKEditor編輯器修改內容時觸發的事件。
blur ：當CKEditor編輯器失去焦點時觸發的事件。
focus ：當CKEditor編輯器取得焦點時觸發的事件。

其它的jQuery事件就自行測試吧!有些事件在CKEditor可能不能使用喔!

二、jQuery事件觸發條件：
(on) blur 物件失去焦點時
(on) change 物件內容改變時
(on) click 滑鼠點擊物件時
(on) dblclick 滑鼠連點二下物件時
(on) error 當圖片或文件下載產生錯誤時
(on) focus 當物件被點擊或取得焦點時
(on) keydown 按下鍵盤按鍵時
(on) keypress 按下並放開鍵盤按鍵後
(on) onkeyup 按下並放開鍵盤按鍵時
(on) onload 網頁或圖片完成下載時
(on) mousedown 按下滑鼠按鍵時
(on) mousemove 介於over跟out間的滑鼠移動行為
(on) mouseout 滑鼠離開某物件四周時
(on) mouseover 滑鼠離開某物件四周時
(on) mouseup 放開滑鼠按鍵時
(on) resize 當視窗或框架大小被改變時
(on) scroll 當捲軸被拉動時
(on) select 當文字被選取時
(on) submit 當按下送出按紐時
(on) unload 當使用者關閉網頁時

三、CKEditor Events
CKEditor Events 有很多，
請參考：CKEditor CKEDITOR.editor
http://docs.ckeditor.com/#!/api/CKEDITOR.editor

例：
configLoaded( evt ) 事件觸發一次編輯配置已經（加載和處理）。
http://docs.ckeditor.com/#!/api/CKEDITOR.editor-event-configLoaded

圖3

四、程式一

主要程式：

var editor = CKEDITOR.replace('content', {
   on : {
    'instanceReady' : function(evt) {
     evt.editor.execCommand('maximize');
    },
    'change' : function(evt) {
     console.log("change");
    },
    'blur' : function(evt) {
     console.log("blur");
    },
    'focus' : function(evt) {
     console.log("focus");
    }
   }
  });

程式檔名：index2.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 src="ckfinder/ckfinder.js"></script>
  <script type="text/javascript">
   $(document).ready(function() {
    var editor = CKEDITOR.replace('content', {
     on : {
      'instanceReady' : function(evt) {
       evt.editor.execCommand('maximize');
      },
      'change' : function(evt) {
       console.log("change");
      },
      'blur' : function(evt) {
       console.log("blur");
      },
      'focus' : function(evt) {
       console.log("focus");
      }
     }
    });
    CKFinder.setupCKEditor(editor, 'ckfinder/');
    console.log("ready!");
   });
  </script>
  </head>
  <body>
   <h2>Hello World!</h2>
   <form id="detaform" method="post">
    <textarea id="content" name="content"></textarea>
   </form>
  </body>
  </html>

測試：
圖4

五、程式二
主要程式：

editor.on('instanceReady', function(evt) {
   console.log("instanceReady");
   evt.editor.execCommand('maximize');
  });
  editor.on('change', function(evt) {
   console.log("change");
  });
  editor.on('blur', function(evt) {
   console.log("blur");
  });
  editor.on('focus', function(evt) {
   console.log("focus");
  });

程式檔名：index3.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 src="ckfinder/ckfinder.js"></script>
  <script type="text/javascript">
   $(document).ready(function() {
    var editor = CKEDITOR.replace('content');
    CKFinder.setupCKEditor(editor, 'ckfinder/');

    editor.on('instanceReady', function(evt) {
     console.log("instanceReady");
     evt.editor.execCommand('maximize');
    });
    editor.on('change', function(evt) {
     console.log("change");
    });
    editor.on('blur', function(evt) {
     console.log("blur");
    });
    editor.on('focus', function(evt) {
     console.log("focus");
    });
    console.log("ready!");
   });
  </script>
  </head>
  <body>
   <h2>Hello World!</h2>
   <form id="detaform" method="post">
    <textarea id="content" name="content"></textarea>
   </form>
  </body>
  </html>

測試：
圖5

下載專案 CKEditorTestE

其它文章

CKEditor instanceReady Event

instanceReady 事件說明：
在創建CKEDITOR實例時觸發的事件，完全初始化並準備互動。

本文使用instanceReady 事件，
實作CKEDITOR初始化後，將CKEditor 編輯器最大化 (maximize)

一、本文測試專案，前題參考：

如有相關設定已在上序二篇有說明時，本文不在說明。

二、程式一

主要修改，加入on綁定事件

 var editor = CKEDITOR.replace('content', {
   on : {
    'instanceReady' : function(evt) {
     evt.editor.execCommand('maximize');
    }
   }
 });

程式：index.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 src="ckfinder/ckfinder.js"></script>
 <script type="text/javascript">
  $(document).ready(function() {
   var editor = CKEDITOR.replace('content', {
    on : {
     'instanceReady' : function(evt) {
      evt.editor.execCommand('maximize');
     }
    }
   });
   CKFinder.setupCKEditor(editor, 'ckfinder/');
   console.log("ready!");
  });
 </script>
 </head>
 <body>
  <h2>Hello World!</h2>
  <form id="detaform" method="post">
   <textarea id="content" name="content"></textarea>
  </form>
 </body>
 </html>

測試：
圖2

三、程式二

主要修改，加入on綁定事件

  var editor = CKEDITOR.replace('content');
 editor.on('instanceReady', function(evt) {
   console.log("instanceReady");
   evt.editor.execCommand('maximize');
 });

程式：index1.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 src="ckfinder/ckfinder.js"></script>
 <script type="text/javascript">
  $(document).ready(function() {
   var editor = CKEDITOR.replace('content');
   CKFinder.setupCKEditor(editor, 'ckfinder/');
   editor.on('instanceReady', function(evt) {
    console.log("instanceReady");
    evt.editor.execCommand('maximize');
   });
   console.log("ready!");
  });
 </script>
 </head>
 <body>
  <h2>Hello World!</h2>
  <form id="detaform" method="post">
   <textarea id="content" name="content"></textarea>
  </form>
 </body>
 </html>

測試：
圖3

下載專案 CKEditorTestE

本文測試專案
在下一篇可下載：
CKEditor change blur focus Event

其它文章

CKEditor + CKFinder for Java

本文說明使用Java語言整合CKEditor + CKFinder

一、本文前題參考：

二、確認CKEditor 相關jar檔
CKEditor 下載
取得 ckeditor-java-core-3.5.3.jar
複製到webapp\WEB-INF\lib

三、確認CKFinder 相關jar檔
CKFinder 下載
取得CKFinder-2.6.1.jar 等相關jar檔
複製到webapp\WEB-INF\lib

四、CKEditor + CKFinder 所需的jar
圖4

五、建立index.jsp

<!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://cksource.com/ckfinder" prefix="ckfinder"%>
 <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 src="ckfinder/ckfinder.js"></script>
 </head>
 <body>
  <h2>CKEditor + CKFinder for Java</h2>
  <form action="getContent" method="get">
   <textarea cols="80" id="editor1" name="editor1" rows="10"></textarea>
   <input type="submit" value="Submit" />
  </form>
  <ckfinder:setupCKEditor basePath="ckfinder/" editor="editor1" />
  <ckeditor:replace replace="editor1" basePath="ckeditor_4.5.7/" />
 </body>
 </html>

注意1：ckfinder的官網已換
原使用
<%@ taglib uri="http://ckfinder.com" prefix="ckfinder" %>
需改為
<%@ taglib uri="http://cksource.com/ckfinder" prefix="ckfinder"%>
注意2：
basePath 是js資料夾名稱
例：
本文webapp/ckeditor_4.5.7/ 則 basePath="ckeditor_4.5.7/"

六、測試
本文測試專案名稱為 CKEditorTest9
WEB-INF\config.xml 的baseURL 需改為
<baseURL>http://localhost:8081/CKEditorTest9/userfiles/</baseURL>
注意：
是改為你的專案名稱，例如你的專案名稱為 MyCKEeditor
則<baseURL>http://localhost:8081/MyCKEeditor/userfiles/</baseURL>
也可為 <baseURL>/MyCKEeditor/userfiles/</baseURL>

6.1 進入index.jsp頁
http://localhost:8081/CKEditorTest9/index.jsp
圖6-1 看到網頁，成功使用CKEditor for Java

6.2 進入上傳圖片頁
圖6-2 看到網頁，且上傳圖片成功，就成功使用CKFinder for Java

其它文章

2016年4月28日星期四

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配置：

一、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 下載

其它文章

2016年4月27日星期三

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 存取資料

其它文章

訂閱：文章 (Atom)

Java程式教學甘仔店

目錄

2016年5月3日星期二

CKEditor contentPreview Event

CKEditor change blur focus Event

CKEditor instanceReady Event

CKEditor + CKFinder for Java

2016年4月28日星期四

CKEditor + CKFinder 基本配置設定之二

CKEditor + CKFinder 基本配置設定之一

CKFinder 下載

CKEditor get set 存取資料

2016年4月27日星期三

CKEditor plugins 增加套件

標籤

精選文章

初學 Java 的 HelloWorld 程式

著作人

網誌存檔

總網頁瀏覽量

追蹤者

目錄

2016年5月3日 星期二

2016年4月28日 星期四

2016年4月27日 星期三

標籤

精選文章

總網頁瀏覽量

追蹤者

2016年5月3日星期二

2016年4月28日星期四

2016年4月27日星期三