HomeWebsite

TinyMCE – WYSIWYG Editor Konten Untuk Web

250px-TinyMCEBagi pemakai CMS joomla, aplikasi word prosesing untuk mengisi konten web (WYSIWYG = What You See is What You Get) bukanlah hal yang baru. Nah, aplikasi yang berbasis Javascript ini bernama TinyMCE atau lebih dikenal dengan Tiny Moxiecode Content Editor, merupakan platform-independent web-based. TinyMCE yang dikembangkan oleh Moxiecode Systems AB termasuk memiliki lisensi open source software. Aplikasi ini melakukan proses convert terhadap field HTML textarea, TinyMCE didesain untuk memudahkan terintegrasi dengan content management systems.

TinyMCE Features :

  • Mudah di intgrasikan, hanya dengan sejumlah kode baris yang dibutuhkan.
  • Sangat mudah dimodifikasi.
  • Mendukung beragam internet browser, Mozilla, MSIE, FireFox, Opera, Safari and Chrome.
  • Sangat ringan, baik PHP/.NET/JSP/Coldfusion GZip compressor dan sangat sedikit proses load bandwidth.
  • Kompetibel dengan ajax.
  • Mendukung beragam bahasa, kecuali bahasa indonesia.
  • Berlisensi software open source.

Untuk memperolehnya dapat diunduh dari website TinyMCE.

[ad#adv-unitku-02]

Setelah melakukan download upload file TinyMCE account hosting darri web anda, kemudian masukan ke sejumlah kode untuk dapat ditampilkan pada halaman web anda yang digunakan sebagai editor konten.

Kode yang harus dimasukkan pada bagian HTML anda :

<script type=”text/javascript” src=”<your installation path>/tiny_mce/tiny_mce.js”></script>

<script type=”text/javascript”>

tinyMCE.init({

// General options

mode : “textareas”,

theme : “advanced”,

plugins : “safari,spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,

iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,

noneditable,visualchars,nonbreaking,xhtmlxtras,template,imagemanager,filemanager”,

// Theme options

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,spellchecker,|,cite,abbr,acronym,del,ins,attribs,|,

visualchars,nonbreaking,template,blockquote,pagebreak,|,insertfile,insertimage”,

theme_advanced_toolbar_location : “top”,

theme_advanced_toolbar_align : “left”,

theme_advanced_statusbar_location : “bottom”,

theme_advanced_resizing : true,

// Example content CSS (should be your site CSS)

content_css : “css/example.css”,

// Drop lists for link/image/media/template dialogs

template_external_list_url : “js/template_list.js”,

external_link_list_url : “js/link_list.js”,

external_image_list_url : “js/image_list.js”,

media_external_list_url : “js/media_list.js”,

// Replace values for the template plugin

template_replace_values : {

username : “Some User”,

staffid : “991234”

}

});

</script>

<form method=”post” action=”somepage”>

<textarea name=”content” style=”width:100%”>

</textarea>

</form>

Selamat mencoba.