引言

本章要教您如何在CakePHP中使用所見即所得編輯器：TinyMCE。 Tinymce是以PHP寫成的所見即所得編輯器，以LGPL發佈，完全不用錢。

下載

範例程式： Tinymce.zip

TinyMCE： TinyMCE下載中心

1. 把Tinymce.zip解開至安裝目錄 (請確認 app 放在安裝目錄中，如果沒有，請自行移動)
2. 把TinyMCE下載中心中下載來的zip內，jscripts目錄中的tiny_mce目錄複製到webroot/js下
3. 在瀏覽器中輸入 '[address]/Tinymces'
4. 如果順利，會看到這個結果 => CLICK

目標

本章將教您如何在CakePHP中使用TinyMCE，關於TinyMCE的使用方法就不仔細說明，有興趣可以到官網看。 我們會做以下幾件事：

1. 下載與安裝TinyMCE
2. 建立TinymcesController
3. 建立index action
4. 建立index的view

下載與安裝TinyMCE

首先，到官網下載 最新版的TinyMCE ， 解開後的目錄如下：

tinymce/
    docs/
    examples/
    jscripts/
        tiny_mce/ <---- 我們要的目錄


將tiny_mce/這個目錄整個複製到 webroot/js/ 目錄下。安裝完成後，目錄應該如下：

app/
    ...
    webroot/
        ...
        /js
            /tiny_mce


建立TinymcesController

接下來直接建立測試用的Controller。 Controller名稱為複數型，叫TinymcesController。 此範例沒有用到任何資料庫，不需要Model。 在Controller中，說明不使用任何layout，而helpers則使用了Html和Javascript二個。 程式碼如下：

<?php
class TinymcesController extends AppController
{
    var $name = 'Tinymces'; //Controller名稱
    var $uses = null; //不使用任何model
    var $layout = ''; //不使用任何layout
    var $helpers = array('Html','Javascript'); //使用Html和Javascript helper
}
?>


建立index action

接者加入action，我們直接加入index()，讓測試的URL長得像[address]/Tinymces。 為簡化範例，action中不做作何動作，程式碼簡單到沒有內容：

function index()
{
}


建立index的view

最後建立index的view，依CakPHP命名規則，檔案需放在/views/tinymces/index.thtml。 由於TinyMCE是使用JavaScript寫運作，所以重要動作都在view裡。 程式中先連結tiny_mce/tiny_mce/js，然後將它初始化。 theme預設有二個，一個叫"simple"，另一個叫"advanced"，全放在js/tiny_mce/themes裡。 也可以加入自己的theme，使用方法必須仔細閱讀使用說明，在此不詳述。 mode:"textareas"會把所有的textarea轉成TinyMCE的編輯器。 程式碼如下：

<?php
    echo $javascript->link('tiny_mce/tiny_mce.js');
?>
<script type="text/javascript">
    tinyMCE.init({
        theme : "advanced",
        mode : "textareas",
        convert_urls : false
    });
</script>
<?php echo $html->textarea('group/col', array('cols' => '59','rows'=>'16')) ?>


連結測試

最最最最最後一步，就是讓人最興奮也最害怕的一步：測試！ 試著在瀏覽器中輸入'[address]/Tinymces'。恭喜成功！

結論

TinyMCE是一個短小精幹的編輯器，簡單模式只需要幾行程式就結束，入門的好工具。 如果想用的更精，就得再仔細看看手冊，不在CakePHP的範圍了。 恭喜您成功的在CakePHP中加入所見即所得的編輯器。 在CakePHP中加入一個功能就是這麼容易。 這只是個開始，想學更多可到 CakePHP手冊(繁體中文）仔細看看中文操作手冊。 也可到CakePHP官方網站看看英文資料。

附錄：讀者筆記

tinymces 無法執行 

五明說：tinymces 無法執行,我按照步驟安裝,放在cake 目錄 但是不知何故無法執行,目錄為 wwwroot/cake/app/webroot/js/tiny_mce

Clar回答說：因為你安裝錯目錄了 最後結果應該是 /app/controller /app/views 而下載的tiny_mce則裝在 /app/webroot/js/tiny_mce