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

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s