這大概是三、四個月前的照片了。


老爸。


其實我們到的時後下很大的雨，所以人不多。






















不難看出是底片吧

Posted by hina

咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩。















這張是女友拍的喔！


羊咩咩出現啦！
















就降

Posted by hina

從歇斯底里的公司離開之後，直奔花蓮，隔天直奔合歡山，再經過清境農場，最後到日月潭。

這是清晨五點半多，天色剛亮沒多久。


湖畔的民宿。



















對岸的飯店被雲霧吞沒了。


不過我們這邊沒有。


手炒爆米花。






出爐囉！


這是第一天的行程

Posted by hina

Diana F+ 亂七八糟第二捲！首先我們來看相館刮片會是甚麼樣子！我已經好久沒有遇到這麼嚴重的刮片了，不管他是沖完之後才刮到還是機器沖的時候刮到，我都覺得是讓人很賭爛的事情！



100 度底片真的很難拿捏，這種相機應該還是 400 度比較好。


這張很妙，底片貌似在片夾裡面浮起來了（不平整）齒格曝光的部分超詭異。


這張很妙，疊到前一格，雖然兩個人自拍但是另一個人完全被切掉。


不小心重曝到，背景是 101 大樓 XDDD


刮片續作（囧）。


林小美！


最後來一張紅色閃光燈見到鬼近照！


就降

Posted by hina

烏來，雖然我上周末才來過，但是，距離我上一次來雲仙樂園這個地方，已經是二十幾年前的事情了。小時後來這裡的印象已經模糊，但是對於纜車倒是還有點記憶。只是，事隔這麼多年，有太多的東西已經不是記憶中的樣子，除了感嘆人事已非之外，我不知道該怎麼對這樣長久以來的記憶與印象找到什麼出口。

飛瀑依舊，只有他沒有時間的痕跡。


以往的五分車，現在變成觀光景點，小時後這裡似乎沒那麼先進。




纜車依舊在走。




多了伴。


小時後的印象，看似相差無幾，畢竟一樣渺小。


沁涼的溪水。


洗不去的。


帶不走的。


大概就只剩下回憶的零星瑣碎，水聲淅瀝的笑聲，慢慢流洩，遠去。


啊不然勒？


就來根烤香腸吧！


就降

Posted by hina

底片不是第一次拍，但是 LOMO 這類型的相機是第一次玩。固定快門，光圈 f/11, f/16, f/22, f/150，最後一個是針孔就先忽略他吧（哈哈）。這次的主角就是流行好一陣子的 Diana F+，最近出了 mini 我才留意到，畢竟 120 對我來說還是有點生疏，我還是適合 135 魂啊（大誤）。

所以，從女友送了我 Diana F+ 之後，隔天我就跑去買 35mm 機背了（笑）。然後呢，趁著假日跟女友跑去老街晃晃，也順便拍完第一捲底片。這次用的底片是之前有提過的 Fuji proplus II 100，當然啦，依照人眼測光來說，f/11 實在不是什麼大光圈，所以除了有上閃光燈以外的照片，幾乎都是糊的！手持 B 快門只有找死而以啊（哈哈哈）。

附帶一提，Fuji proplus II 100 真的不錯用！

不囉嗦了，看照片吧。




































恩，我也不知道要說啥，想到再補吧

Posted by hina

老街，很久沒帶 A16 Caline 出來玩了（大誤）。


這次帶了 Diana F+ with 35mm back。


還是一樣很多人。




停在 Diana F+ 上的蝴蝶。


臭豆腐啦！其實大部分的照片都是女友拍的。


點菜中！


蠻有特色的店。


剛買的小背包。




我拿就不怎麼可愛了 XDD


骨董筷子桶。


棉花糖，棉花糖，棉花糖，棉花糖。


烏來雲仙樂園。


烏來老街一樣爆多人！


最後一定要來一張！


就降

Posted by hina

今天去誠品買了這個東西。


135 機背套件。


全員到齊。


就降

Posted by hina

今天女友神神秘秘的下班跑去誠品，去接她的時候說是買表弟的生日禮物，結果提了兩大袋，我還在想說是甚麼東西這麼一大包。回到家之後才笑笑的說是我的生日禮物（大驚）。

就是他啦，SNOWCAT Diana F+。


背面有一隻貓。


套裝版本，有閃光燈。


再來一張。


就降

Posted by hina

寫到這裡，我想說一句公道話，那就是，我之前寫的三篇都可以直接扔進垃圾桶，是一般垃圾不用回收了（翻桌）。編輯器最重要的一個部分，就是自訂的對話框（Dialog），編輯器預設的對話框，跟 FCKeditor 有些許的差異，像是上傳檔案的對話框，在 CKeditor 裡面就沒有在預設工具列內（主要是要提倡跟自家的 CKFinder 合併使用）。

首先呢，在 CKeditor 裡面，所有的對話框都是使用 JavaScript 來產生，所以在設定上並不像以前 FCKeditor 那樣改改他的原始的 html 檔案就能更動對話框，所以關於這一點，對於 JavaScript 不是很熟悉的人恐怕會遇到很多地雷。但是，我看了看還是覺得，這次在 CKeditor 裡面，還是必須要稍微看過原始碼，才能真的有效控制整個 Dialog 的狀況啊（攤手）。

我們繼續來看 Dialog 與 UI，這兩個部分其實是互相綁定的，所以如果把 UI 的部分拿掉，Dialog 可能會半殘。從原始碼看來，UI 有絕大部分是給 Dialog 使用的（CKEDITOR.ui.dialog），所以如果把 UI 的 Core 拿掉的話，那可想而知會發生什麼事情，而 CKEDITOR.dialog 系列的類別，其實是用來做設定（dialogDefinition）的，跟產生對話框並沒有直接的關係。

接著，我們先來看看設定的部分在做些甚麼事情。

1. CKEDITOR.dialog
   用來產生與修改對話框，前提是必須要有已經設定（註冊）好的對話框按鈕元件。
2. CKEDITOR.dialog.add
   加入（註冊）一個對話框，對話框的對象必須是已定義好的元件（Object）。
3. CKEDITOR.dialog.addIframe、CKEDITOR.dialog.addUIElement
   歐雷~歐雷~歐雷，目前還無法使用 Iframe，而 UIElement 在 builder 有莫名奇妙的雷。
4. CKEDITOR.dialog.exists
   檢查對話框是否已存在（已註冊）。
   

只有一個？那其他的呢？其他的 Class（buttonDefinition、contentDefinition、contentDefinitionObject、dialogDefinition、dialogDefinitionObject、uiElementDefinition、dialogCommand）並不是能夠直接呼叫的 API，而是要在設定中取得元件之後所能夠使用的方法，具體的使用方法依照官方範例如下：

[code javascript]
CKEDITOR.on( 'dialogDefinition', function( evt )
{
    var definition = evt.data.definition;
    var content = definition.getContents( 'page1' );
    ...
} );
[/code]在這裡的 dialogDefinition 是 CKEDITOR 預設的監聽事件，由監聽事件所傳入的 data 可以提取整個 UI 跟 Dialog 的 Definition，由這裡來做到上述的 Definition Class 的設定與控制。

至於大家很關心的 Uploader 與 FileBrowser 的部分，官方的簡單說明是這樣的（真的非常簡單）。雖然他也提供了另外一種說明，但是他依舊非常的 CKEDITOR，令人完全看不懂啊！所以說，檔案上傳到底怎麼辦呢？這裡暫時先不提，等到我說完如何加入新的按鈕之後再補上。首先，我們來看看如何在 Toolbar 裡面加入按鈕，底下是一個典型的 CKEDITOR 編輯器的 Toolbar 設定：

[code javascript]
var editor = CKEDITOR.replace( 'editor1', {
                toolbar: [
                    ['Source','-','Save','NewPage','Preview','-','Templates'],
                    ['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print', 'SpellChecker', 'Scayt'],
                    ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
                    ['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'],
                    '/',
                    ['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
                    ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
                    ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
                    ['Link','Unlink','Anchor'],
                    ['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
                    '/',
                    ['Styles','Format','Font','FontSize'],
                    ['TextColor','BGColor'],
                    ['Maximize', 'ShowBlocks','-','About','MyButton']
                ]
            });
[/code]以上是一個完整的 CKEDITOR 的按鈕，裡面有個 MyButton 是我們要加入的按鈕。是的，我們要加入的按鈕必須要在 Toolbar 裡面先定義，不然 Dialog.add 會找不到對象。接下來就是，加入一個新的 Dialog，並綁定到這個按鈕上面。

[code javascript]
// 必須要等待編輯器將 pluginsLoaded 做完才可以繼續做 Dialog 設置與綁定動作。
editor.on( 'pluginsLoaded', function( ev )
{
    // 檢查 Dialog 是否已經存在，不存在才要建立
    if ( !CKEDITOR.dialog.exists( 'myDialog' ) )
    {
        // 註冊一個新的 Dialog，名稱就叫做 'myDialog'
        CKEDITOR.dialog.add( 'myDialog', function( editor )
        {
        // 這裡所返回的，就是 dialogDefinition 的設定。
            return {
                title : 'My Dialog',
                minWidth : 400,
                minHeight : 200,
                contents : [
                    {
                    // 這裡是定義 Dialog 的內容，所使用到的都是那些 UI 與 Dialog 的 Definition。
                    // 裡面的東西有複雜到，待會我會直接寫出檔案上傳的範例。
                   }
                ]
            };
        } );
    }

    // 建立一個新的編輯器命令，並將這個編輯器命令綁定在剛剛建立好的 myDialog 上面。
    editor.addCommand( 'myDialogCmd', new CKEDITOR.dialogCommand( 'myDialog' ) );

    // 綁定剛剛 Toolbar 所設定的 'MyButton' 並且將命令執行綁定在剛剛的編輯器命令上。
    editor.ui.addButton( 'MyButton',
        {
            label : 'My Dialog',
            command : 'myDialogCmd'
        } );
});
[/code]以上就是在編輯器中建立一個按鈕並實際呼叫出對話框的操作模式。中間的 contents 我沒有寫的原因是，那個部分非常的複雜，而且以官方的 API 來看，根本無法知道架構與相依狀況到底是怎麼回事（反正我就是慧根差）。接著，我直接來舉一個檔案上傳的 contents 給各位：

[code javascript]
id : 'Upload',
hidden : true,
filebrowser : 'uploadButton',
label : editor.lang.image.upload,
// 在 Dialog 中註冊元件
elements :
    [
        {
            type : 'file',
            id : 'upload',
            label : editor.lang.image.btnUpload,
            style: 'height:40px',
            size : 38
        },
        {
            type : 'fileButton',
            id : 'uploadButton',
            filebrowser : 'info:txtUrl',
            label : editor.lang.image.btnUpload,
            'for' : [ 'Upload', 'upload' ]
        }
    ]
[/code]以上就是在 Dialog 中產生一個檔案上傳的選擇檔案輸入框與檔案上傳按鈕，實際的執行狀況如下圖所示：



那檔案會上傳到哪裡呢？好問題！檔案上傳的資料要在 Toolbar 設定完之後另外設定，官方有說明，其實也就是這樣而已：

[code javascript]
var editor = CKEDITOR.replace( 'editor1', {
               toolbar: [
                    [...略...],'MyButton']
               ],
                filebrowserUploadUrl : '/uploader/upload.php'
           });
[/code]上述的 '/uploader/upload.php' 就是檔案上傳的路徑，而他會預設傳幾個值進去（以 GET 的方式），所以在檔案上傳時，真正完整的上傳路徑是：

/uploader/upload.php?CKEditor=editor1&CKEditorFuncNum=1&langCode=en

而這個上傳所要用到的監聽很特殊，需要用 CKEDITOR.tools.callFunction 呼叫並取得返回值，而這個 API 的說明是＂零＂！根據我明查暗訪的結果，這個 callFunction 還必須要先 addFunction，而 addFunction 需要有一個依照 CKEDITOR 所建立的元素（instance），然後這一整串流程在 API 中的說明是＂零＂！

所以，CKEDITOR 的 Dialog 到底是改得更順手，還是更麻煩了呢？各位看倌你覺得呢（茶），其他的 Dialog 跟 UI 我會繼續在找時間補上，畢竟這兩個區塊才是我們真正關心的部分啊！

Posted by hina

我現在的心情可以這樣表示（）這樣有夠貼切嗎！這個 CKeditor 有些地方實在是超乎我的想像，他做到了一些並不是編輯器迫切需要的功能，舉例來說，他可以控制 DOM 元件。也許你會覺得，我在編輯器裡面可以控制 DOM 元件並不是什麼壞事，偏偏，他控制的是編輯器以外的 DOM 元件。

當我在測試 Event 的時候，發現這個東西並不只有一種，換句話說，他的 Event 控制分成兩組，一組是自訂的監聽與觸發（類似 ActionScript 那樣），另一組是針對 DOM 元件的特定 events 作觸發（諸如 onClick 等）。這兩種 Event 控制分屬不同的類，自定監聽與觸發是單獨屬於 CKEDITOR.event，而針對 DOM 元件的部分則屬於 CKEDITOR.dom.element（等同於 CKEDITOR.document）。

這裡先講自定監聽與觸發的部分，針對 DOM 的因為實在不是屬於編輯器的範圍，所以容後再述。關於自定 Event 的部分其實方法都很簡單，大概有以下幾個項目：

1. CKEDITOR.event.implementOn
   靜態方法，宣告一個 Object 元件，將 Object 元件的資料傳入所呼叫的 Event 中。
2. fire
   觸發 Event。
   
3. fireOnce
   觸發 Event，但是觸發完成之後會釋放所有的監聽。
   
4. hasListeners
   檢查是否包含監聽函式。
   
5. on
   設定監聽函式。
   
6. removeListeners
   移除監聽函式。

另外還有一個類別，叫做 eventInfo，他是用來取得監聽所傳入的一些數值，而且還包含了兩個方法：

1. data
   監聽函式傳入的任何資料。
   
2. editor
   監聽函式傳入的編輯器。
3. listenerData
   監聽函式傳入的資料（跟 data 不同，容後說明）。
   
4. name
   監聽函式的名稱。
   
5. sender
   監聽自身元件（Object）。
   

我們要建立一個自定的監聽，其實方法很簡單：
[code javascript]
var myObject = { message : 'Example' };
CKEDITOR.event.implementOn( myObject );
myObject.on( 'someEvent', function(event) {
  alert(event.message);
});
myObject.fire( 'someEvent' );
[/code]這樣就完成了一個監聽的建立與觸發。CKEDITOR.event.implementOn 這個靜態方法的用意，就是讓一個 Object 元件可以設立監聽與被觸發。我們再來看 on 與 fire 這兩個方法：

[code javascript]
var myeditor = CKEDITOR.replace( 'editor1' );
var myObject = { message : 'Example' };
CKEDITOR.event.implementOn( myObject );
myObject.on( 'someEvent',
  function(event) {
   alert(event.message);
    alert(event.listenerData.listener);
    alert(event.editor.name);
    alert(event.name);
    alert(event.data.all);
    alert(event.priority);
  },
  { message: 'Example2' },
  { listener: 'Example3' },
  100
);
myObject.fire( 'someEvent', { all: 'Example4' }, myeditor);
[/code]基本上 on 可以傳入的資料如下：

1. 監聽的名稱。
2. 監聽的函式。
3. 監聽輸入的值（是個 Scope），會蓋掉 CKEDITOR.event.implementOn 宣告所建立的 Object。
4. 監聽建立時附帶傳入的資料。
5. 監聽優先值。

而 fire 則可傳入 data 與 editor 兩項數值，這樣可以分清楚 listenerData 與 data 的不同處嗎（其實我覺得有點畫蛇添足，但是也或許有甚麼地方會需要用到這樣的特性吧）。另外 event 的兩個方法 cancel() 與 stop() 個人是認為跟 fireOnce 有異曲同工之妙。官方的舉例如下：

[code javascript]
/* cancel() 範例 */
someObject.on( 'someEvent', function( event )
{
    event.cancel();
});
someObject.on( 'someEvent', function( event )
{
    // This one will not be called.
});
alert( someObject.fire( 'someEvent' ) );  // "true"

/* stop() 範例 */
someObject.on( 'someEvent', function( event )
{
    event.stop();
});
someObject.on( 'someEvent', function( event )
{
    // This one will not be called.
});
alert( someObject.fire( 'someEvent' ) );  // "false"
[/code]看完之後我只有一句話想說，既然不要讓人家觸發，就不要建立監聽就好啦（翻桌）。

最後，CKEDITOR 的 DOM，說穿了根本是一個超級大地雷！他的工作就是用來取代 jQuery 爾等的 DOM 控制器，換句話說，他自己寫了一套像是 jQuery 這樣的 DOM 控制器，來給他的編輯器使用。偏偏，他的 API 並沒有提到如何去控制＂編輯器內部＂的 DOM 元件，所以，個人認為，DOM 那一塊根本是雞肋（或者說，我們都被 jQuery 寵壞了）。

到現在為止，你發現了嗎？
CKEDITOR 到目前為止都只是在作 jQuery 可以做的工作而已啊啊啊啊！

下一回我們來講地雷等級更高的 UI 跟 Dialog 的部分（這兩項才是編輯器該做的事情）。

Posted by hina

接續上一篇所提到的基本與完整模式，後來我在測試其他的程式碼的時後發現，所謂的基本（basic）模式，的確是很簡單的五個 JavaScript 檔案就可以做到，但是相對的，犧牲掉的部分卻比我想像中的還要多很多。而最令我震驚的部分是，在基本模式中，呼叫編輯器的 CKEDITOR 的其中一支 prototype: instances 會全數失效，所帶來的後果就是，編輯器本身會完全無法控制（所以才叫做 basic 嗎）？

所以，基本上想要客製化這個編輯器，在官方還沒有釋出（或者不打算釋出）各種 plugins 之間的相依性的話，還是得使用完整的版本（就是檔案大小高達 265 KBytes 的版本）。雖然檔案有點過大，但是以現在的網路速度來說，應該還不至於到能感覺到嚴重延遲的地步。

接著，我先來提一下 htmlParser 與 htmlWriter。這兩個函式其實主要是用來產生與寫入標準的 HTML 標記語言，不同的是，htmlParser 的作用其實是用於監聽貼入的內容，而 htmlWriter 則是單純的寫入。我們先來看 htmlParser 的方法有哪些：

1. onCDATA, function( cdata )
   依序取出被貼入的 <sript>...</script> 內的資料。
   
2. onComment, function( comment )
   依序取出被貼入的 <!-- ... --> 內的資料。
   
3. onTagClose, function( tagName )
   依序取出被貼入的 </tag> 的標籤名稱。
   
4. onTagOpen, function( tagName, attributes, isSelfclosing )
   依序取出被貼入的 <tag> 的標籤名稱、屬性值與是否為自我結尾標籤（self-closing tag）。
   
5. onText
   依序取出被貼入的 <tag> ... </tag> 內的資料。
   
6. parse
   貼入 HTML 資料。
   

扣除第六項之外，其他的方法都是監聽的方法，總共會針對貼入的內容的五種標籤做監聽動作。至於你問我為什麼要監聽這些動作，其實是為了能夠在寫入編輯器的內文或是取出內文時能做一些調整，當然啦，如果你是很單純的使用者打什麼你就存什麼的話，就不需要這麼費功夫了。

接著，htmlParser 還有幾個特別的類別：

1. CKEDITOR.htmlParser.cdata
2. CKEDITOR.htmlParser.comment
3. CKEDITOR.htmlParser.element
4. CKEDITOR.htmlParser.fragment
5. CKEDITOR.htmlParser.text

以上的類別全部都是為了給 htmlWriter 用的，直接呼叫會返回 undefined，至於為什麼他要寫在 API 裡面我也不懂。而且 htmlWriter 幾乎包含了上述所有功能（除了 fragment 之外），這一塊我想官方還要做詳細一點的說明才行，不然無法直接呼叫使用是有點奇怪。

至於 htmlWriter（有雷） 又在做甚麼：

1. openTag, function( tagName, attribute )
   開啟一個 tag，形同 <tag 的意思。但是那個 attribute 是個雷，因為這個函式完全沒有屬性設定的相關動作，所以，我在想這個地方應該是官方有所保留要做甚麼事情用的吧。
   
2. openTagClose, function( tagName, isSelfclosing )
   關閉一個開啟的 tag，形同 <tag.... > 的意思。請不要跟 closeTag 搞混，這裡還有是否為自我結尾標籤（self-closing tag）的判定，他是用於關閉一個開啟中的標籤，與成對標籤的關閉不同。
3. attribute, function( attName, attValue )
   在標籤中設定屬性，這裡的屬性設定才是有效的，而這個設定必須要在 openTagClose 之前完成。
   
4. closeTag, function( tagName )
   關閉成對標籤，形同 <tag.... > ... </tag> 的意思。
5. text, function( text )
   加入內文。
   
6. comment, function( comment )
   加入注釋，形同 <!-- ... --> 的意思。
7. lineBreak
   在原始碼加入斷行，形同 \n 的意思。
8. indentation
   在原始碼加入縮排，形同 \t 的意思。
   
9. setRules, function( tagName, rules )
   在標籤中加入標籤規則，這裡的標籤規則總共有五項：
   
   • indent，插入縮排（\t）。
   • breakBeforeOpen，標籤開啟前斷行（\n）。
   • breakAfterOpen，標籤開啟後斷行（\n）。
   • breakBeforeClose，標籤關閉前斷行（\n）。
   • breakAfterClose，標籤關閉後斷行（\n）。
   如果需要對某特定標籤設定標籤規則，在標籤開啟（openTag）之前需要先執行標籤規則（setRules）。

截至目前為止，這些都還是屬於 Core 的部分，還有很多可以寫，但是今天看太多 htmlWrite 的 plugin 部份，雷太多被炸得滿頭包（是的，htmlWrite 有分 core 跟 plugin 兩種版本，但是作用相同），所以下次就來講講其他的部分，大概是 editor 與 events 的部分吧。

Posted by hina

如果有聽過 FCKeditor 的人，那我想 CKeditor 就一定要換上來用。雖然是同一家公司出品的編輯器，但是用了這麼久的 FCKeditor，我對於他的 API 頁面少成這樣實在有點頭痛，講好聽一點有四頁（驚），講難聽一點只有一頁。自從 CKeditor 推出之後，我一看到他的 API 頁面，差點沒痛哭流涕！這才叫做 API 啊（淚）！

CKeditor 是 FCKeditor 的新作品，無論在速度或是 API 上都有很強大的進步。雖然我是在本機測試，但是幾乎瞬間啟動的編輯器畫面還是深得我心啊（大心）。同時官方也提供了完整的 source code 以供參考（做壞事），你可以在官方的 svn 裡面找到 CKeditor 的 nightbuild 版本，如果你心臟夠大顆可以試試看。

同時在 svn 裡面也有提供 CKPackager 給你下載，你可以用 pack 檔案來打包自己想要的 CKeditor 的功能。但是，因為各種原始檔案並沒有詳細說明個別的相依特性，所以自行打包的話就必須要承擔一點風險，不然編輯器有可能會跛腳。所以，除非必要，不然還是不建議自己打包，你可以使用輕量化的 ckeditor_basic 就好（完整版的 CKeditor 檔案高達 265KBytes）。

首先，我們直接跳過官方那個鳥鳥的 Develop's Guide 吧（喂喂）。先從源頭看起，當你下載回來解壓縮之後，你會看到有 _source 這個資料夾，他就是所有的原始檔案，數量龐大，不建議胡亂服用（沒人叫你吃），最重要的地方是 core 資料夾，裡面是整個 CKeditor 的核心，依照 ckeditor_basic 的設定，我們由五個 js 看起。

1. ckeditor_base.js
2. event.js
3. editor_basic.js
4. env.js
5. ckeditor_basic.js

以上就可以架構一個檔案很小五臟俱全（7 KBytes）的編輯器。同時，這五個檔案也建立了 CKeditor 最基本的 Namespace/Classes 所需要的功能。

1. Namespace: CKEDITOR
2. Namespace: CKEDITOR.env
3. Classes: CKEDITOR.editor
4. Classes: CKEDITOR.event

至於這些東西能做些甚麼事情？

1. event 提供：
   
   • 觸發（fire, fireOnce）
   • 監聽（on）
   • 監聽控制（hasListeners, removeListeners）
2. editor 提供：
   
   • DOM 控制（element, elementMode）
   • 編輯區方法（暫不詳述，大致上跟 FCK 差不多，但是有一些新的，也有未完成的）
     

對於很基本的編輯器來說，這些控制與方法其實已經能符合八成以上的需求。

接著我來說幾個很有趣的東西（雖然是屬於 editor_base，但需要額外 plugin 支援）：

1. 虛擬(假)元件（需要 plugin 支援，並未包含在官方發佈的完整 ckeditor.js 中）
   
2. 截取快照

首先，虛擬(假)元件雖然是包含在編輯器的 editor.js 中，但是他是需要你額外把 plugin 給打包進來的功能，個人猜測他還在測試中，所以並沒有真正把他包到完整的版本裡面。他的功能是，利用一張圖片來取代真正要顯示（插入）在編輯器裡的元件。這樣的動作跟 TextCube 的編輯器插入 Flash 的動作很像。他就只是插入一張替代的圖片，然後在儲存的時候再將圖片給換回真正要插入的 code。

其實這個功能我已經在 FCKeditor 實作出來了，所以我很樂見他有內建這樣的功能。但是，稍微深入一點，他這個方法要呼叫還不是那麼容易，首先，你要先準備一組符合 CKEDITOR 標準的元件給他，換句話說，你必須要用 CKEDITOR API 先建立一個元件（就是你要插入的 code），然後再利用這個方法把元件換成假的。至於說，這樣作會不會多此一舉？我個人是覺得見仁見智，你要用正規表示式去洗其實也可以啦。

至於截取快照，他是另一種＂儲存＂的方式，不真的儲存，而是將已經輸入好的內容放到某個變數裡面（就是丟到記憶體裡面啦），然後你可以隨時取出來用。這樣可以解決遠端連線出問題的時候資料的保存，但是缺點是，萬一客戶端這邊當機，也一樣一去不復返啊（茶）。

就暫時先到這，接下來將會介紹 htmlParser/htmlWrite 這個核心命脈 plugin（笑）。

Posted by hina

r² = b² + (r-a)²
r² = b² + r² -2ar+r²
r = b²/ 2a

求得第三點 D3 的座標值 (ex, r)，上圖綠色的線代表書本上緣的邊界值，所以 r 值其實已經超出了邊界值(r > ey)，所以必須要再次計算翻頁出來的真正 D3 的位置。由直角三角形比例線段求得點 D3 對於邊界值的距離 z。

r/c = t/z
z = tc / r

所以新的 D3 座標值應該為 (ex - z, ey)，其中 z 為 (r - ey)*c / r，求得新的 D3 座標點後，接下來要求的是 D4 的座標點。

(v - z)² + p² = z² -> p² = z² - (v - z)²
v² + (t - p)² = t²
v²+ t²- 2pt + p²= t²
v²+ t²- 2pt + (z²- (v - z)²) + p²= t²
v = pt / z

p² = z² - (v - z)²
p² = 2(pt/z)z - (pt/z)²
pz²  = 2tz² - pt²
p = 2tz²/ (z²+ t²)
p = 2tz²/ g²

v = (2tz²/ g²)(t/z)
v = 2t² z / g²

已上求得點 p, v 對於上緣極限值的距離，所以可得點 D4 的真實座標值為 ( ex - v, ey - p )。倘若點 D3 沒有超出上緣極限值，則 D3 = D4 為共點。

基本上，若是以矩形對角線相交點為二元座標原點，則書本四個角落分別就是四個象限，公式都一樣，只有正負值的變化而以。
就降

Posted by hina

r² = (2c)² + (b-r)²
r² = 4c² + b² -2br+r²
r = 4c²/2b + b/2
r = ((2a)² -b² )/2b + b/2
r = 2a²/ b

故在滑鼠任意點 (x,y) 與已知點 (fx,fy) 可求得底邊點 (r, fy)。則 r 點 x 座標值為 fx - 2a²/ b，其中：

a = 1/2 ( sqrt((fy-y)² + (fx-x)² )
b = fx-x


所以，就這樣

Posted by hina

GUI for jQuery

這東西是出來扼殺程式設計師的嗎（大誤），你看看這種拖拖拉拉的 GUI 到底是怎麼回事（你說說看，你說說看啊）。對於小型活動、時程短暫或是使用次數非常低（甚至是一次性頁面）來說，非常的方便。

結論就是，我還是包袱ㄚ款款ㄟ來去賣雞排好了

Posted by hina

Posted by hina

趁著假日，跟女友去福隆吃便當，騎腳踏車。



便當。




舊草嶺隧道口。






龍門吊橋。


學人精。




回程火車上窗外的風景


就降~~

Posted by hina

Flickr 瀏覽圖片的註解功能，花了點時間把它變成 Flash 版本了。不過因為 TC 不能放這種跨網域存取的 flash 檔案，所以只好放在其他地方了。在這邊附上截圖給大家參考：



這個東西並不難，滑鼠動態圈選的部分之前的文章已經有提到兩個很完整的範例了。至於動態圈選的時候，因為利用 Sprite 來畫框框，配合 MOUSE_MOVE 的監聽，會出現殘影，所以，其實可以利用 MovieClip 來做，只要加一塊半透明的 MovieClip 然後利用 MOUSE_MOVE 來控制 MovieClip 的 Scale 特性，就不會有殘影問題了。缺點是，如果這塊 MovieClip 裡面還放了東西，那就會變形囉。

就降~

Posted by hina

上次的那個程式改成這樣了。


嗯，這篇是純灌水，等我想到再補

Posted by hina