Integrasi Text Editor TinyMCE di Codeigniter

Text Editor merupakan salah satu fitur penting yang wajib Anda buat ketika berhubungan dengan pembuatan aplikasi web. Jika Anda sudah terbiasa dengan CMS Joomla atau Blog, ketika kita hendak menulis artikel akan disertai fitur text editor untuk mempermudah user melakukan styling terhadap teks yang akan ditulis. Bayangkan saja, jika Anda hanya dihadapkan dengan form textarea untuk menuliskan suatu artikel yang tentu saja akan erat kaitannya dengan penambahan link, gambar, video, flash atau lainnya.

Sebenarnya, ada bermacam-macam texteditor WYSIWYG(What You See Is What You Get) sebagai plugin dalam aplikasi web. Untuk postingan kali ini, saya hendak mencoba berbagi pengalaman dalam integrasi texteditor TinyMCE ke dalam framework favorit saya, yaitu Codeigniter. Andai saja Anda pernah melakukan integrasi TinyMCE ke dalam aplikasi web tanpa framework, pengaturan-pengaturannya tidak terlalu berbeda ketika hendak kita integrasikan dengan Codeigniter.

Pertama, tentu saja harus download terlebih dahulu plugin TinyMCE-nya di sini. Pilih versi stable saja. Pastikan Anda sudah memiliki project Codeigniter di dalam server lokal. Buat folder ‘js’ di dalam root aplikasi. Extract tinyMCE hasil download terlebih dahulu. Copy-kan folder tiny_mce dari folder tinymce/jscripts/ ke dalam folder js yang telah dibuat sebelumnya.

Buat sebuah file view di dalam folder views, misalkan editor_view.php. Ketikkan script berikut ini.

<html>
    <head>
	<title>Tiny MCE</title>

	<script type="text/javascript" src="<? echo base_url();?>js/tiny_mce/tiny_mce.js"></script>
	<script type="text/javascript">
		tinyMCE.init({
			mode : "textareas",
			theme : "advanced",
			plugins : "pagebreak,style,table,save,advhr,advimage,advlink,emotions,inlinepopups,insertdatetime,preview,media,searchreplace,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,wordcount,advlist",

			// 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 : "visualchars,nonbreaking,template,pagebreak,restoredraft",
			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/content.css",

			// Drop lists for link/image/media/template dialogs
			template_external_list_url : "lists/template_list.js",
			external_link_list_url : "lists/link_list.js",
			external_image_list_url : "lists/image_list.js",
			media_external_list_url : "lists/media_list.js",

			// Style formats
			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'}
			],

			// Replace values for the template plugin
			template_replace_values : {
				username : "Some User",
				staffid : "991234"
			}
		});
	</script>
    </head>

    <body>
        <textarea></textarea>
    </body>
</html>

Simpan, dan buat file controller untuk memanggil view di atas. Misalkan saya membuat controller dengan nama post.php. Pastikan Anda membuat aturan-aturan penulisan controller sesuai aturan yang ada di codeigniter. Buat fungsi index dan isikan kode di bawah ini:

class Post extends Controller {

	function Post()
	{
		parent::Controller();
	}

	function index()
	{
		$this->load->view('editor_view');
	}
}

Coba Anda buka di localhost dengan url localhost/nama_project/index.php/post. Jika sudah benar, Anda akan melihat tampilan editor layaknya Microsoft Word. Jika masih ada yang kurang paham, silahkan mengisi komentar.

Note: Untuk integrasi syntaxhighlighter di dalam tinyMCE eperti permintaan mas eky, baca artikel ini

http://omfarid.com/2012/04/integrasi-syntaxhighlighter-di-text-editor-tinymce/

farid

Selamat datang dan salam kenal. Penulis merupakan lulusan Sekolah Tinggi Ilmu Statistik Jakarta jurusan Komputasi Statistik. Menekuni pemrograman web khususnya PHP dengan Yii Framework. Penggemar musik instrumen dan film Doraemon. Berasal dari Kota Lumpia Semarang dan pernah bertugas menjadi Staf Produksi dan IPDS di BPS Kabupaten Melawi. Sejak tahun 2016, mulai bertugas sebagai Staf Pengolahan Data di BPS Provinsi Kalimantan Barat

You may also like...

  • adeavenged

    Maaf gan, ane mau download tinymce nya dmna .