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

下一篇:
































其它文章

標籤

Oracle (150) Oracle DB (144) Oracle_DB (143) Oracle SQL (135) JAVA (82) css-基本類 (65) MySQL (59) CSS Selector (58) jQuery (49) JavaScript-基本類 (39) JavaScript (37) JavaScript HTML DOM (37) JavaScript-HTML_DOM (36) CSS3 (30) JAVA-基本類 (28) jQuery UI (27) Apache (23) Oracle GROUP BY (20) datepicker (20) Android (18) Oracle Date (17) c (17) JAVA-lang套件 (16) Linux (16) Oracle Sub Query (16) Spring-基本類 (16) jQuery-基本類 (16) MySQL-進階系列教學 (15) Android基本類 (14) Grails (14) Oracle join (14) SQLite (13) Spring (13) WIN7-基本類 (13) grails-基本類 (13) linux cent os (13) CKEditor (12) JAVA-流程控制類 (12) JAVA_Spring (12) PHP (11) MySQL-基本系列教學 (10) SQLite for java (10) Windows (10) c/c++ (10) Notepad++ (9) eclipse (9) jQuery-Selector (9) sqldeveloper (9) DB_Toad (8) JAVA_IDE_Eclipse (8) JavaScript-String類 (8) MySQL DB Toad (8) MySQL-DATE相關 (8) MySQL-函式相關 (8) Spring Bean (8) Android Studio (7) HTML5 (7) Hibernate (7) JAVA-OCWCD (7) JavaScript-陣列類 (7) JAVA-程式分享 (6) JAVA.util套件 (6) JavaScript-數學類 (6) MinGw (6) MySQL-其它類 (6) Spring MVC (6) Apache_Tomcat (5) Apache套件_POI (5) CSS (5) JavaScript-Date物件 (5) JavaScript-其它類 (5) PostgreSQL (5) centos (5) httpd (5) log4j (5) 基本資訊 (5) CSS Properties (4) Dev-C++ (4) Oracle DDL (4) Servlet (4) Sublime (4) apache_Maven (4) Android NDK (3) Eclipse IDE for C/C++ (3) Hibernate-基本類 (3) JAVA-問題 (3) JAVA-綀習分享 (3) Linux 指令 (3) Proxy Server (3) Spring Mobile (3) Squid (3) VirtualBox (3) maven (3) zk (3) 生活其它 (3) Bootstrap (2) JAVA_IO (2) JAVA_其它_itext套件 (2) JBoss-問題 (2) Jboss (2) MySQL-語法快速查詢 (2) Spring AOP (2) Spring Batch (2) Spring Boot (2) Spring i18n (2) Subversive (2) Tomcat 8 (2) UML (2) c++ (2) c語言綀習題 (2) jQuery Mobile (2) jQuery-事件處理 (2) jQuery-套件類 (2) putty (2) svn (2) weblogic (2) Apache_JMeter (1) Apache套件_BeanUtils (1) Apache套件_StringUtils (1) Base64 (1) Google API (1) HTML5-基本類 (1) JAVA 7 (1) JAVA 日期 (1) JAVA-OCJP (1) JAVA-WEB (1) JAVA_IDE (1) JAVA其它 (1) JBoss Server (1) JMX (1) JSP (1) Java RMI (1) Java String (1) Joda Time (1) Linux_其它 (1) MySQL教學 (1) Oracle_VirtualBox (1) SQL Server (1) SWT (1) Session (1) Struts 2 (1) Tool (1) TortoiseSVN (1) ZK Studio (1) csv (1) grails-其它類 (1) jQuery-進階 (1) java mail (1) java web (1) jsoup (1) modules (1) tomcat (1) 其它類 (1) 圖片工具 (1) 模擬器 (1) 櫻桃鴨 (1) 泰山 (1) 聊天 (1) 聚餐 (1) 開發工具 (1) 開發資訊 (1) 霸王櫻桃鴨 (1)

精選文章

初學 Java 的 HelloWorld 程式

撰寫一個JAVA程式 public class HelloWorld{ public static void main(String[ ] args){ System.out.println("我第一支Java程式!!"); } } ...