[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+台灣電話號碼的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