0 Install Editor Tinymce Pada Web Berbasis PHP

Posted by Blogger Name. Category: website

TinyMCE adalah sebuah editor WYSIWYG Javascript HTML yang berbasis web dan platform independent, dan dirilis sebagai Open Source di bawah lisensi LGPL oleh Moxiecode Systems AB. TinyMCE memiliki kemampuan untuk mengubah field textarea HTML atau elemen HTML lainnya sebagai instans editor. TinyMCE juga sangat mudah untuk diintegrasikan ke dalam Content Management Systems lainnya.

Fitur TinyMCE * Mudah untuk diintegrasikan - Hanya beberapa baris kode yang dibutuhkan. * Customizable - Tema dan plugin, elemen invalid blok dan memaksakan atribut. * Browserfriendly - Mozilla, MSIE, FireFox, Opera, Safari dan Chrome. * Ringan - Gzip kompresor PHP / .NET / JSP / ColdFusion, membuat TinyMCE 75% lebih kecil dan lebih cepat di-load. * AJAX Compatible - Anda dapat dengan mudah menggunakan AJAX untuk menyimpan dan memuat konten! * Internasional - Multibahasa mendukung penggunaan paket bahasa. * Open Source - Gratis di bawah lisensi LGPL, jutaan orang membantu menguji dan memperbaiki editor ini setiap hari
.
Persyaratan TinyMCE tidak memiliki persyaratan langsung selain kompatibilitas browser, dan tentu saja JavaScript harus diaktifkan. Dan TIDAK ADA kode back-end yang didistribusikan bersama TinyMCE. TinyMCE dapat disetup untuk menggunakan textarea HTML sebagai ruang kerjanya. Bila form dikirimkan ke server, anda dapat memiliki sistem yang melakukan sesuatu dengan isi textarea tersebut, seperti menyimpannya ke database atau file. Frontend juga dapat disetup untuk membaca konten dari file, sehingga anda dapat membuat perubahan terhadap file tersebut.

Berikut tutorialnya

 .

1 input java scrip berikut di bagian atas atau dibawah koneksi database

Scrip diatas untuk memberi tahu dmn letak direktory Tinymca berada ../webin/tiny_mce/tiny_mce.js ganti sesuai dengan direktori anda menyimpan Tiny_mca

2. untuk menampilkan Tiny_mce

Buat terlebih dahulu text area biasa

Setelah itu tulis scrip berikut di atas textarea yang tadi di buat

Scrip berikut akan merubah textarea yang anda buat menjadi seperti ini

3. memasang thema pada Tiny mce
Kalo tadi itu mengunakan thema standar sekarang mengunakan thema advance
Pada scrip berikut :

Pada bagian mode : "textareas" tambahkan di bawahnya scrip berikut :

theme : "advanced",
plugins : "autolink,lists,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,wordcount,advlist,autosave,visualblocks",
// 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,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak,restoredraft,visualblocks",
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"
}
Maka hasilnya pasti akan berubah menjadi seperti ini :

oke selesai juga Tutorial Instalasi Tinymce yang singkat semoga bermanfaat dan bisa di implementasikan kalo ada yang mau di tanyain bisa mentions ke Twitter Writer @olidfire Atau langsung ke officel @bombercom 

Tweet

Komentar →