olid
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.
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 :
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 :
Posted in: website
