小惡魔 - 電腦技術 - 生活日記 - 美食介紹 - AppleBOY » www

[編輯器] CKeditor 更換 background-color and font-size

appleboy — Tue, 30 Mar 2010 12:21:52 +0000

相信大家在製作 Web 過程，一定會用到編輯器，然而 CKeditor 前身 FCKeditor 非常有名，FCKeditor 運行了六年之久，在去年2009年的時候，轉換成了 CKeditor，目前開發團隊也專注於此版本，現在已經推出到 CKEditor 3.2 released!，可以參考 CKEditor 3.x – Developer’s Guide，裡面也整合了 jQuery，替很多開發者想到更多管道去整合網站，然而今天設計網站，需要改變編輯器的背景顏色，預設是白色背景，但是並非所有網站都是白色呈現，所以才需要動到背景顏色，這樣好讓使用者可以融入整個背景，在 Plurk 發表了這問題，也找了官方論壇，都沒有發現正確解答，官方論壇有篇類似問題：Change the background color of the CKEditor text area，這篇自己試過是沒有用的，正確解法可以參考 CKeditor 的 API:contentsCss。

1. 首先在 CKeditor 根目錄建立新檔案：mysitestyles.css

body

{

  /* Font */

  font-family: Arial, Verdana, sans-serif;

  font-size: 12px;

  /* Text color */

  color: #f0f0f0;

  /* Remove the background color to make it transparent */

  background-color: #353c42;

}

html

{

  /* #3658: [IE6] Editor document has horizontal scrollbar on long lines

  To prevent this misbehavior, we show the scrollbar always */

  _overflow-y: scroll

}

img:-moz-broken

{

  -moz-force-broken-image-icon : 1;

  width : 24px;

  height : 24px;

}

img, input, textarea

{

  cursor: default;

}

2. 設定 config.js 檔案(Ckeditor 目錄裡面)

CKEDITOR.editorConfig = function( config )

{

    // Define changes to default configuration here. For example:

    // config.language = 'fr';

    config.uiColor = '#AADC6E';

    config.contentsCss = '/path/ckeditor/mysitestyles.css';

};

重點在於 config.contentsCss = ‘/path/ckeditor/mysitestyles.css’; 這行，在 Path 部份，請注意由根目錄開始寫起喔。

另外解法，就是用 jQuery Adapter，header 加入：

<script type="text/javascript" src="/ckeditor/ckeditor.js"></script>

<script type="text/javascript" src="/ckeditor/adapters/jquery.js"></script>

使用 Ckeditor 方式如下：
html:

<textarea id="test" name="test" style="width: 400px; height: 200px" /></textarea>

javascript

$('#test').ckeditor({ contentCss: '/path/ckeditor/mysitestyles.css' });

就提供這兩種解法給大家參考。

Related View

[PHP]好用的FCKeditor (0)

[FreeBSD]high performance caching reverse proxy: Varnish (安裝架設篇)

appleboy — Sat, 20 Mar 2010 16:12:44 +0000

在上禮拜跟 DarkHero 兄聊到 How To Build a Scalable Web Site (3/6) 的上課講義，互相討論了 MySQL Load balance 以及 http reverse proxy 的方式，以前自己有用 HAProxy 當作 Web 平衡負載，順便紀錄了 HAProxy FreeBSD 安裝方式，這次要來介紹今天重點：Varnish Cache Server，在近幾年流行的 Caching 機制，大家會想到 Squid，只要您設定良好的 Squid 參數，它一定運作的非常穩定，然而它的核心依然是 forward proxy，要架設成 Reverse Proxy 還必需要設定一些參數才可以達到，是有一定的困難性，然而 Varnish Cache Server 底層就是高效能 caching reverse proxy，也因為 Squid 是 1980 年發展出來的，程式架構過於老舊，可以參考 ArchitectNotes 瞭解這部份詳情。也許您會問到 Varnish 可以架設成 forward proxy 嗎？答案是可以的，但是您也許不會這麼做，因為它需要 DNS 技術，以及需要一個非常大且複雜的 Varnish VCL(Varnish Configuration Language) file。

1. 今天要介紹如何在 FreeBSD 系統安裝，在介紹之前，系統必須先安裝好 apache，這樣才可以正確啟動，利用 ports 安裝：

cd /usr/ports/www/varnish/

make install clean

2. 修改 /etc/rc.conf

# varnishd

varnishd_enable="YES"

varnishd_listen=":80"

varnishd_admin=":81"

varnishd_backend=":5566"

varnishd_config="/usr/local/etc/varnish/default.vcl"

上面設定意思是說 Varnish listen on port 80，傳送 traffic 到後端 5566 port，管理連接埠是 81，也可以使用指令方式：

varnishd -a :80 -b localhost:8080 -T localhost:6082

Varnishd listen on port 80，and forwarding traffic to a web server listen on localhost port 8080. It also turns on the management interface on port 6082.

3. 修改 default.vcl (Varnish Configuration Language)
VCL 檔案告訴 Varnishd 正確的處理每個 request processing，包含在接受到 request 之前所處理的行為 vcl_recv()，另外還有 vcl_hit()、vcl_miss() 等…，都是用來處理 cache 如果存在或者是不存在時的情境 request。FreeBSD 預設放在 /usr/local/etc/varnish/default.vcl。打開此檔案，您會看到：

backend default {

   .host = "127.0.0.1";

   .port = "80";

}

您只要把 host = “127.0.0.1″ 改成你後端要連接的 ip 或者是 host，這樣 Varnish 會 forward traffic 到您的 web server。接下來只要啟動 apache 跟 Varnish 就算是初步架設完成。

/usr/local/etc/rc.d/apache22 restart

/usr/local/etc/rc.d/varnishd restart

大家可以看到 61.*.*.* 連到本機 80 port，接下來 Varnish 在開啟隨機 57475 port 連接到 Web Server 5566 port。

Q:如何讓 apache 紀錄正確的 Client IP 到 log 檔案呢？
1. 打開 Vcl config 檔案，寫入
Varnish configuration:

sub vcl_recv {

  # Add a unique header containing the client address

  remove req.http.X-Forwarded-For;

  set    req.http.X-Forwarded-For = client.ip;

  # [...]

}

2. 開啟 apache httpd.conf 加入此行：

LogFormat "%{X-Forwarded-For}i %l %u %t \"%r\" %>s %b \"%{Referer}i\" \"%{User-Agent}i\"" varnishcombined

Q:如何讓 PHP 程式紀錄正確的 Client IP？
可以參考底下程式碼就可以完全抓到 Proxy 後面真正使用者IP，否則您的 Web 只會抓到 Reverse Proxy 的 IP Address。

function getIP() {

  if (validip($_SERVER["HTTP_CLIENT_IP"])) {

    return $_SERVER["HTTP_CLIENT_IP"];

  }

  foreach(explode(",",$_SERVER["HTTP_X_FORWARDED_FOR"]) as $ip) {

    if (validip(trim($ip))) {return $ip;}

  }

  if (validip($_SERVER["HTTP_X_FORWARDED"])) 

  {

    return $_SERVER["HTTP_X_FORWARDED"];

  }

  else if (validip($_SERVER["HTTP_FORWARDED_FOR"])) 

  {

    return $_SERVER["HTTP_FORWARDED_FOR"];

  } 

  else if (validip($_SERVER["HTTP_FORWARDED"])) 

  {

    return $_SERVER["HTTP_FORWARDED"];

  } 

  else if (validip($_SERVER["HTTP_X_FORWARDED"])) 

  {

    return $_SERVER["HTTP_X_FORWARDED"];

  } 

  else 

  {

    return $_SERVER["REMOTE_ADDR"];

  }

}

function validip($ip) {

  if (!empty($ip) && ip2long($ip)!=-1) {

    $reserved_ips = array (

      array('10.0.0.0','10.255.255.255'),

      array('127.0.0.0','127.255.255.255'),

      array('169.254.0.0','169.254.255.255'),

      array('172.16.0.0','172.31.255.255'),

      array('192.168.0.0','192.168.255.255'),

    );

    foreach ($reserved_ips as $r) {

      $min = ip2long($r[0]);

      $max = ip2long($r[1]);

      if ((ip2long($ip) >= $min) && (ip2long($ip) <= $max)) return false;

    }

    return true;

  } 

  else 

  {

    return false;

  }

}

Q:rotate Varnish log file every day？
打開 /etc/newsyslog.conf，加入底下兩行

/var/log/varnish.log        640     7   *   @T00    JB  /var/run/varnishlog.pid

/var/log/varnishncsa.log    640     7   *   @T00    JB  /var/run/varnishncsa.pid

每天12點進行 log 備份，使用 gzip 壓縮 log 檔案。

Related View

Google Chrome 支援超過 40,000 Extensions! with Greasemonkey

appleboy — Wed, 03 Feb 2010 15:33:13 +0000

看到 Google Chrome Blog 發表的Google Chrome 支援超過 40,000 Extensions!，當 Google Chrome 瀏覽器剛出來的時候，造成 Web Developer 一些震撼，因為 Chrome 強調的是擁有快速的 Javascript 引擎，以及快速的啟動，Fast start-up、Fast loading、Fast search，也因此讓很多設計網站的工程師必須把 Chrome 的支援性考慮進去，但是由於剛推出的瀏覽器，沒有任何外掛功能，我本身用 FireFox 瀏覽器很多年了，FireFox 的附加元件讓許多程式設計師投入開發，也製造出很多方便的附加元件來讓大家使用，例如：FireBug、Gmail Manager、Greasemonkey…，然而 FireFox 最方便的就是 Greasemonkey 此附加元件，使用者可以撰寫簡單 Javascript 語言來跟指定網站進行元件控制，現在 Google 工程師聽到我們的聲音了，Google Chrome 4 加入 Greasemonkey user scripts 功能，大家可以到 userscripts.org 下載超過 40,000 script 安裝到 Chrome 瀏覽器。您可以在 blogger 使用 emoticons，大家可以去參考看看。

由於 Chrome 支援了 Greasemonkey，所以趕快把 FireFox 所安裝的 script，也安裝到 Chrome，可是我發現之前 DarkKiller 大神寫的 Wretch Album Expander 已經不能用了，所以我將它實做到 Chrome，可以從這裡下載安裝：Wretch Album Expander for Google Chrome or FireFox，平時自己偶而會看看無名小站，所以也是方便自己觀看照片，此 script 也可以安裝在 FireFox 喔。這樣大家就不用再看圖片還要一張一張慢慢點，只要負責按換頁就可以了 ^^。

來測試看看，隨便找一本無名相簿：馬甲‧小葵，畫面：點我觀看

Related View

phpBB 3.1 版本將不再支援 PHP4

appleboy — Sun, 31 Jan 2010 16:40:24 +0000

在 phpBB 官方網站看到這篇：『phpBB 3.1 to discontinue support for PHP versions below 5.2』，內容大致上是說 phpBB 3.0 “Olympus” 系列的版本將是 phpBB 支援 php 4 最後一個版本，之後所推出的 phpBB 3.1 “Ascraeus” 版本，PHP 需要 5.2 或者是更高才可以正確執行。隨著 3.1 版本的推出，3.0 將會繼續維護 6~9 個月的時間，這版本將會繼續維持相容於 php 4 系統。

由於 phpBB 3.1 還處於開發的階段，尚未決定發布日期，所以大家還是有很多時間可以將 php 升級到 5.2.0 或者是更高。看到 phpBB 可以捨棄 php 4 還蠻高興的，自己本身玩 phpBB 多年，看到 2.0 到 3.0 的變化蠻大的，php 4 安全姓做的非常不好，所以導致 code 非常隴長，希望 3.1 可以快點推出。

Related View

MySQL count(”欄位”) vs mysql_num_rows 速度？ (5)

Google Chrome 推出 4.0 穩定版 & Mozilla 推出 FireFox 3.6

appleboy — Fri, 29 Jan 2010 04:07:55 +0000

Mozilla 在上禮拜 (2010.01.22) 推出了 FireFox 3.6，大家可以下載測試效能如何，也可以 follow 狐耳摩莎的 Plurk 來收到 MozTW 的最新資訊，這篇重點不是在 FireFox，而是 Google 正式推出 Windows 版本 new Chrome 4.0 stable release，4.0 版本已經可以正式使用 Google Extensions，之前在3.0版本，只能安裝 Chrome Beta 版本才可以使用 extension，現在只要將 Windows Google Chrome 升級成 Stable 版本，就可以全面使用 Extensions，可以使用手動升級，或者是在下禮拜就會自動 update 到最新版本。

最後可以參考 ericsk 大大所寫的從開發者角度看 Chrome 4 的推出

Reference:
Extensibility + new HTML and JavaScript APIs for Google Chrome
More Resources for Developers

Related View

How to install Google Web Toolkit with Eclipse

appleboy — Sun, 17 Jan 2010 11:27:12 +0000

Google Web Toolkit (簡稱：GWT)是先以 Java 語言編寫 AJAX 應用程式網頁，然後在編譯成最佳化 Javascript，不但幫助了剛入門 Javascrit，然後又需要撰寫 AJAX 應用程式的工程師很大的幫助，不僅如此，Google App Engine 也提供了 Java 跟 Python 環境，整合了 GWT，讓您可以上傳到 GAE 的空間進行測試，GWT 目的是產生具有高效能性的 Web 應用程式，您不需要是 Javascript 專家也可以做到，GWT 用在 Google 相當多的服務，例如 Google Wave, 新版的 Google AdWords 可以參考這裡更多實際範例。它是開放姓原始碼(open source)，完全免費，您也可以參與 GWT 的開發。

Google Plugin for Eclipse 支援 Google Web Toolkit 跟 Google App Engine 開發，我們可以直接安裝此 Plugin 就可以開始上手 GWT，當製作完成之後，就可以上傳到 GAE，直接打開提供的網址就可以看到成果了。

首先安裝 Google Plugin for Eclipse，先去下載 Eclipse 3.5 (Galileo) 最新版，打開 Eclipse

1. 選擇 Help -> Install New Software

2. 在 Work With: 填入 http://dl.google.com/eclipse/plugin/3.5

3. 將 Plugin 跟 SDKS 全部選取，接下來按下一步就可以完成

Related View

國外 VPS 虛擬主機效能比較

appleboy — Tue, 01 Dec 2009 02:45:53 +0000

在 Dk 大神那邊看到國外一篇 VPS 效能比較：『VPS Performance Comparison』，DK 對於這篇也寫了一些心得，Eivind Uggedal 針對國外比較有名的虛擬主機(包含 Amazon EC2、Linode、Prgmr、Rackspace、Slicehost )進行了效能測試，原作者寫了一些測試效能的 Python 程式，也公開程式碼在 GitHub repository，底下就來看看幾張作者測試效能產生的圖表。

針對虛擬主機的 Memory、Monthly cost、Storage、Transfer，價格方面大家都差不多，Linode 贏在每個月給的流量，Amazon 雖然記憶體給的很高，但是相對的價格很貴，在流量($0.17/$0.10 out/inn per GB of bandwidth)也是另外計費的，所以比較起來 Linode 大勝。

比較 CPU 方面，Linode 提供了 32/64 位元的 CPU 架構讓您使用，Linode、Slicehost、Rackspace 提供四個虛擬 CPU，相對於 Amazon 只提供 32位元架構以及單顆 CPU，比較下來，還是 Linode 大勝。

這兩張效能圖，很顯然的都是 Linode 大勝，所以本篇報導結論：買 Linode 就是對的，便宜又可以得到好的虛擬主機(VPS)效能。

延伸閱讀：VPS Comparison between Slicehost and Prgmr

Related View

[VPS] 虛擬主機 Linode 720 使用心得 (一) (9)

[Gmail] offline Gmail 根據 Labels 自訂選擇下載郵件備份

appleboy — Tue, 17 Nov 2009 03:08:04 +0000

在 Gmail Lab 裡面講到這篇：『Choose which messages get downloaded for offline use』，內容是說之前 Gmail 開發出來可以離線瀏覽 Email 信件的 Offline Gmail 功能，不管你在任何地方您都可以任意去瀏覽之前收過的 mail 郵件，我想這功能相當方便，但是如果您的信件如果很多，有些不想同步到自己私人電腦，是不是覺得有些不方便，而想根據 Gmail 設定的 Label 來同步郵件呢，所以 Gmail 幫您考慮到的此點，也針對 Offline 做了設定改善。首先你必須先啟動 Offline Gmail 的功能，接下來在 Settings 的 Offline tab 裡面進行設定您想要下載同步的 Labels 郵件，畫面大致上如下，我想非常容易設定。