Java程式教學甘仔店: 5月 2016

2016年5月6日星期五

MongoDB for Windows 環境建置

本文說明如何再Windows 環境建置 MongoDB。

一、先查詢該電腦Windows版本，如果您不清楚的版本，開啟命令提示字元，執行圖1指令即可知道該電腦版本

二、進入MongoDB官網下載符合該系統的Mongodb版本

三、安裝MongoDB

四、選擇自訂安裝路徑至如下圖即可安裝完成

五、啟動MongoDB

1. 需要開起命令提示字元將路徑指向Mongodb至bin目錄並執行md \data\db(該檔案存放路徑)

2. 接著執行mongod.exe即可啟動

六、進入MongoDB shell環境

再另外開起命令提示字元，切換到MongoDB 安裝路徑下的 bin 目錄，執行mongo.exe即可進入該環境操作

其它文章

2016年5月3日星期二

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

其它文章

訂閱：文章 (Atom)

Java程式教學甘仔店

目錄

2016年5月6日星期五

MongoDB for Windows 環境建置

ZK Hello World

2016年5月3日星期二

CKEditor contentPreview Event

CKEditor change blur focus Event

CKEditor instanceReady Event

CKEditor + CKFinder for Java

標籤

精選文章

初學 Java 的 HelloWorld 程式

總網頁瀏覽量

追蹤者

目錄

2016年5月6日 星期五

2016年5月3日 星期二

標籤

精選文章

總網頁瀏覽量

追蹤者

2016年5月6日星期五

2016年5月3日星期二