Aloha Editor - HTML5 WYSIWYG Editor

Aloha Editor是一套HTML5 WYSIWYG的編輯器，
WYSIWYG為What You See Is What You Get的縮寫，
意思是在螢幕上編輯的頁面會是最後呈現的頁面，
而Aloha Editor就是用來直接編輯HTML5網頁內容，
你可以簡單的改變字型, 顏色, 加入圖片, 表格...等類似文書處理的動作，
在看不到HTML Source Code的情況下改變網頁的外觀設定。

接著廢話不多說，
我們直接說明如何使用Aloha Editor：

要在頁面裡使用Aloha Editor時要載入必備Script，
首先要先載入require.js與aloha.js把Aloha Editor相關的Library。

    <script src="http://cdn.aloha-editor.org/latest/lib/require.js"></script>
    <script src="http://cdn.aloha-editor.org/latest/lib/aloha.js"></script>

再來載入Aloha Editor需要的Css檔。

    <link href="http://cdn.aloha-editor.org/latest/css/aloha.css" rel="stylesheet" />

接著要設定可編輯區域，並Activate該區域的Aloha Editor。

<script type="text/javascript">
    Aloha.ready( function() {
        Aloha.jQuery('#context').aloha();
    });
</script>

上面的Script中，我們使用Aloha的jQuery功能取得ID為context的Element把設定為Aloha Editor區域。


Aloha Editor透過載入需要的Plugin使Menu上有該Plugin的功能，例如我們載入下列幾個Plugin

<script src="http://cdn.aloha-editor.org/latest/lib/aloha.js"
    data-aloha-plugins="common/ui,
                        common/format,
                        common/list,
                        common/link,
                        common/highlighteditables" >
</script>

加入的方法就是在load aloha.js時在script加入data-aloha-plugins屬性，
裡面的值放要載入的Plugin名稱。

以下為使用Aloha Editor的範例：

Aloha Test

Hello, this is a Aloha Editor Test. Thanks

參考來源：
Aloha Editor