[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.大功告成