[Grails]整合TinyMCE與解決UrlMapping路徑問題

TinyMCE是一個可以跨平台,以JavaScript+HTML為基礎開發的所見即所得(WYSIWYG)編輯器,這次整合的目的是客戶希望可以一個類似編輯Word的工具來編輯網站的內容,而不是單純的只有textarea文字。

原本常用的Grails Plugin: RichUI Plugin,裡面也有整合TinyMCE,不過使用起來似乎插入表格會出現問題,且只有整合到3.0版(TinyMCE目前版本4.0b3),因此就考慮不透過richui,直接整合TinyMCE。

步驟如下
1.到官網下載最新的程式碼,把js放到你專案web-appjs下

2.設定顯示頁面
在你想要顯示的頁面include tinymce.min.js

<script src="${resource( dir:’js/tinymce’,file:’tinymce.min.js’)}"></script>

並貼上以下初始設定(詳細可以參考官網)

  • 其中selector指的是你要顯示元件的類型(textarea)與名稱(這裡使用description)
  • 設定你需要的大小(width/height)
  • 預設所有的選項都是英文的,如果需要其他語系可以到這裡下載,不過沒有繁體中文的檔案,可以從我這裡下載,下載後更名為zh_TW.js放在lang目錄下就可以

<script>
tinymce.init({
    selector: “textarea#description",
    theme: “modern",
    width: 600,
    height: 400,
    language:"zh_TW",
    plugins: [
         “advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker",
         “searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking",
         “save table contextmenu directionality emoticons template paste textcolor"
   ],
   content_css: “css/content.css",
   toolbar: “insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | l      ink image | print preview media fullpage | forecolor backcolor emoticons", 
   style_formats: [
        {title: ‘Bold text’, inline: ‘b’},
        {title: ‘Red text’, inline: ‘span’, styles: {color: ‘#ff0000’}},
        {title: ‘Red header’, block: ‘h1’, styles: {color: ‘#ff0000’}},
        {title: ‘Example 1’, inline: ‘span’, classes: ‘example1’},
        {title: ‘Example 2’, inline: ‘span’, classes: ‘example2’},
        {title: ‘Table styles’},
        {title: ‘Table row 1’, selector: ‘tr’, classes: ‘tablerow1’}
    ]
 }); 
</script>

3.排除resource轉址
因為TinyMCE會include到其他的js檔案,在Grails會把resource檔案mapping到/static/xxx.js的路徑,會造成其他檔案無法載入,這時候需要在Config.groovy加上以下這一段即可。

grails.resources.adhoc.excludes = [‘/js/tinymce/**/*.*’]

4.大功告成

[Grails]前端可同時輸入多個子物件的方法(One-Many)

使用Grails開發系統時,經常會設計有許多一對多的對映關係,例如:一個人有多個電話、住址、電子郵件或是銀行帳戶,或者是一個物件可以上傳多個檔案、照片等。此時雖然可以輕易在domain class做好一對多的對映設定,但是在前端使用者介面,要新增多個子物件就需要一點技巧了。

這裡以一個禮物(Gift)對定多個連結(SysLink)為例子,大致說明一下需要修改的部份:

Gift Model主要就是設定對映多個連結(SysLink),以及cascade設定
Gift.groovy

Loading ….

SysLink最主要是要設定deleted的transient屬性,在前端可以用來是記錄使用者預計刪除的檔案。
SysLink.groovy

Loading ….

設定好Model後,就開始在view上面做手腳了,我們在想要新增/修改的頁面上透過render template的方式來做。

我這裡的範例是寫在透過generate-view自動產生的_form.gsp裡面,因為會用到jquery的一些語法,記得順便include進來

<g:javascript library="jquery" plugin="jquery"/>

在要產生links輸入區塊加入以下程式碼,就是去透過_links.gsp來render此區塊,並且把giftInstance參數傳過去。

<g:render template="links" model="[‘giftInstance’:giftInstance]" />

_links.gsp處理新增連結的Javascript,如果是其他欄位需求,自己去修改即可,原本已經在資料庫的資料則是透過render _link.gsp來達成

Loading ….

_link.gsp是用來呈現原本的資料,當使用者在前端刪除該筆資料時,透過Javascript是把deleted的屬性設定為true,並將該筆資料隱藏,如此一來當資料儲存時,就可以在Controller裡面去判斷哪些資料要新增,哪些資料要刪除。

Loading ….

GiftController.groovy在update屬性裡面要加上判斷,處理要刪除的資料

Loading ….

參考資料:
http://omarello.com/2010/08/grails-one-to-many-dynamic-forms/

Grails+台灣電話號碼的contraint

在Grails的Domain Object設定中,可以透過constraints的設定來讓檢查使用者輸入的文字,本篇是想針對台灣的電話號碼寫一個contraint。

在domain object上面想要應用正規表示式(Regular Expression)的寫法如下

static constraints = {
contactPhone(matches: “電話的正規表示式")
}

台灣的電話號碼大多分為下面幾種

市話

  • 格式為區碼+電話號碼
  • 區碼為2-3碼
  • 開頭是0
  • 電話號碼則為6到8碼
  • 可能有分機(1~5碼)

如此一來正規表示式可以寫成 0\d{1,2}(\d{6,8})
如果接受使用可以輸入"-“來分隔區碼的話,可以寫成0\d{1,2}-?(\d{6,8}),其中問號代表"-“可有可無。

如果需要分機,假設最多分機為5碼,且可有可無,可以寫成 0\d{1,2}-?(\d{6,8})(#\d{1,5}){0,1}

手機

  • 10碼
  • 09開頭
其正規表示式可以寫成09\d{2}-?(\d{3})-?(\d{3})

如果還做成mask的方式讓使用者清楚如何輸入,例如(_ _ _)_ _ _ _ – _ _ _ _(#_ _ _ _ _)
可以參考jquesy的plugin http://www.slideshare.net/Marcelocajueiro/mask-validator-gem-with-tricks

推薦好用的JSON工具

JSON(Javascript Object Notation)是一種輕量級的資料交換語言,以文字為基礎,且易於讓人閱讀。儘管JSON是在Javascript的一個子集,但JSON是獨立於語言的文本格式,並且採用了類似於C語言家族的一些習慣。(維基百科)

JSON現在愈來越普及了,因為它有XML結構化的特性,卻又省去了不必要的贅字,讓解析、傳輸的效能都比較好,尤其是在AJAX的應用上更是廣泛,這裡介紹兩個好用的線上工具:JSON Editor與JSON 2 HTML

1.JSON Editor
透過樹狀結構編輯,可以用來設計你的JSON內容,你可以從根節點一步步建立object/array/string/number…等節點,甚至還可以整個節點複製/剪下/貼上,是我目前看到最方便的線上工具。

當然你也可以把你現有的JSON String貼到上面去驗證、解析甚至修改。

2.JSON 2 HTML
設計完JSON後,現有的JSON String可讀性比較差,這個網站提供你轉成HTML格式,而且還不是單純的靜態HTML唷,你可以隨時針對各節點進行展開/收合。讓你更能夠一目了然的閱讀JSON String,很適合團隊或與客戶進行討論溝通。