Domino WYSIWYG Editor

Domino RichText Field, secara basic memiliki tiga jenis interface:

1. TextArea biasa (Using HTML)
2. Java Editor (Using Java Applet)
3. DHTML Editor (Using Best fit for OS)

Namun ketiganya belum memberikan solusi WYSIWYG Editor seperti yang saya inginkan. TinyMCE adalah sebuah WYSIWYG Editor yang memiliki fitur lengkap untuk sebuah Web WYSIWYG Editor.

TinyMCE

Tiny Moxiecode Content Editor dikembangkan secara utuh dengan menggunakan JavaScript, dengan kemampuan-kemampuan sebagai berikut:

• Skinnable
• Easy integration
• Cross-platform
• Opensource
• 100% JavaScript

http://tinymce.moxiecode.com/index.php

Bagaimana Integrasi dgn Domino?

1. Download tinymce, extract ke local directory Anda
2. Copykan semua isi directory tiny_mce (dibawah directory tynimce/jscript) ke directory c:/lotus/domino/data/domino/html/ (sesuaikan untuk directory Lotus Domino Anda, misalkan: /local/notesdata/domino/html untuk di linux)
3. TinyMCE script telah siap untuk digunakan

Apabila Anda memiliki sebuah form dengan sebuah RichText field bernama body, berikut adalah sample code yang bisa Anda gunakan:

HTML Head Content:

@If(@IsDocBeingEdited;
“<script type=\”text/javascript\” src=\”/tiny_mce/tiny_mce.js\”></script>” + @NewLine +
“<script type=\”text/javascript\”>var _show_editor = true;</script>”;
“<script type=\”text/javascript\”>var _show_editor = false;</script>”) + @NewLine

JS Header:

if (_show_editor){
tinyMCE.init({
mode : “exact”,
elements : “Body”,
theme : “advanced”,
plugins : “table”,
extended_valid_elements: “font[size|color|face]”,
theme_advanced_toolbar_location : “top”,
theme_advanced_toolbar_align : “left”,
theme_advanced_buttons1 : “formatselect, fontselect, fontsizeselect, separator, bold, italic, underline, strikethrough, separator, justifyleft, justifycenter, justifyright, justifyfull, separator, sub, sup,separator, forecolor, hr, removeformat,”,
theme_advanced_buttons2_add : “separator, visualaid, charmap, separator, tablecontrols”,
theme_advanced_buttons3 : “”
})
}

Letakkan pula code berikut pada submit button Anda untuk men-save:

function FormSubmit() {
<…your validation code…>
tinyMCE.triggerSave();
if (form.Body.value.trim()==””){
alert(‘Isi Body Surat tidak boleh kosong!’)
return false;
}
document.forms(0).submit();
}

Selamat mencoba 🙂

Yani Dama Putera
Codephile
yanidp@yahoo.com