Lotus Domino / Notes R6.5、7.x 如何使用 TinyMCE Editor?

2009-11-29

Lotus Domino / Notes R6.5、7.x 如何使用 TinyMCE Editor?

TinyMCE 和 CKeditor ( FCKeditor ) 都是提供網頁編輯的 WYSIWYG ( 所見即所得 ) 編輯器 ( Editor )，都可以用來取代 Lotus Domino/Notes 在 Web 上的應用，有關 Lotus Domino/Notes 整合 CKeditor ( FCKeditor ) 的作法，請參考這裡，和 TinyMCE 整合的方式如下：

1.下載 TinyMCE 及正體中文語言檔。

2.解壓後將 \tinymce\jscripts 底下的 tiny_mce 資料夾整個放到 Lotus Domino Server 上的 \data\domino\html 下。

3.建立一個 Form (套表)，命名TinyMCEForm。

4.在 TinyMCEForm 上面新增一個 Richtext 欄位，命名為 Body，在欄位的 HTML 屬性設定 ID 為 body，class 屬性也是 body。

5.在 TinyMCEForm 的 HTML Head Content 加入下面內容 (大小寫有差)。

{ <script type="text/javascript" src="/tiny_mce/tiny_mce.js"></script> }

6.在 TinyMCEForm 的 OnLoad 加入下面內容 (大小寫有差)。

tinyMCE.init({ theme : "advanced", mode: "exact", elements : "body", //body 是步驟 4 的id theme_advanced_toolbar_location : "top", theme_advanced_buttons1 : "save, newdocument, |, bold, italic, underline, strikethrough, |, justifyleft, justifycenter, justifyright, justifyfull, styleselect,formatselect,fontselect,fontsizeselect", theme_advanced_buttons2 : "cut, copy, paste, pastetext, pasteword, |, search, replace, |, bullist, numlist, |, outdent, indent, blockquote, |, undo, redo, |, link, unlink, anchor, image, cleanup, help, code, |, insertdate, inserttime, preview, |, forecolor, backcolor", theme_advanced_buttons3 : "tablecontrols, |, hr, removeformat, visualaid, |, sub,sup, |, charmap, emotions, iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen", theme_advanced_buttons4 : "insertlayer, moveforward, movebackward, absolute, |, styleprops, |, cite, abbr, acronym, del, ins,attribs,|,visualchars,nonbreaking,template,pagebreak", height:"350px", width:"600px", file_browser_callback : 'myFileBrowser' }); function myFileBrowser (field_name, url, type, win) { var fileBrowserWindow = new Array(); fileBrowserWindow['title'] = 'File Browser'; fileBrowserWindow['file'] = "my_cms_script.php" + "?type=" + type; fileBrowserWindow['width'] = '420'; fileBrowserWindow['height'] = '400'; tinyMCE.openWindow(fileBrowserWindow, { window : win, resizable : 'yes', inline : 'yes' }); return false; }

7. 在 TinyMCEForm 裡新增一個按鈕，然後，加入下列 Javascript，加好之後，在 Web 上開啟這張套表，應該就會出現 TinyMCE可用了。。

tinyMCE.triggerSave(false,false);
document.forms[0].submit();

8. 撰寫一支轉譯 Body 欄位內容為 "Pass-Thru HTML" 的代理程式 (Agent)。

把步驟 8 的代理程式加到 TinyMCEForm 的 WebQuerySave 裡，這樣就算完成了。