Berikut langkah-langkah untuk menambahkan plugin upload gambar dalam texare dengan TyniMCE 4:
1. Download
TinyMCE
Download
plugin di https://www.tinymce.com/,
usahakan pakai versi terbaru yakni v4. Jika sudah masukan folder tinymce di
dalam framework laravel di folder public/js (terserah).
2. Instal
plugin upload image
TinyMCE
sendiri tidak menyediakan fitur upload image untuk versi yang free, jadi kita
harus memakai plugin dari luar. Silahkan download pluginnya di http://justboil.me/. Kalau
sudah download, ekstrak, copy foldernya, pindahkan ke dalam tinymce/plugins/,
setelah dipaste rename nama folder menjadi jbimages.
justboil.me-master à ubah menjadi jbimages
Kemudian kita
integrasikan ke dalam framework laravel, di dalam artikel-input.php, paste
kode/perintah JS ini (didalam tag head).
<head>
<html>
<title>Tutorial
Menambah TinyMCE kedalam PHP</title>
<head>
<script
type="text/javascript"
src="tinymce4/js/tinymce/tinymce.min.js"></script>
<script
type="text/javascript">
tinymce.init({
selector: "textarea",
//
===========================================
// INCLUDE THE PLUGIN
//
===========================================
plugins: [
"advlist autolink lists link image
charmap print preview anchor",
"searchreplace visualblocks code
fullscreen",
"insertdatetime media table
contextmenu paste jbimages"
],
// ===========================================
// PUT PLUGIN'S BUTTON on the toolbar
//
===========================================
toolbar: "insertfile undo redo |
styleselect | bold italic | alignleft aligncenter alignright alignjustify |
bullist numlist outdent indent | link image jbimages",
//
===========================================
// SET RELATIVE_URLS to FALSE (This is
required for images to display properly)
//
===========================================
relative_urls: false
});
</script>
</head>
<body>
<table>
<tr>
<td>Judul</td>
<td>:</td>
<td><input
type="text" name="judul"></td>
</tr>
<tr>
<td>subjudul</td>
<td>:</td>
<td><input
type="text" name="subjudul"></td>
</tr>
<tr>
<td>Artikel</td>
<td>:</td>
<td><textarea
name="artikel"></textarea></td>
</tr>
</table>
</body>
</html>
Karena yang
itu gambar, jadi teman-teman silahkan copy di sini http://justboil.me/ (TinyMCE 4.x Example).
Kalau sudah
teman-teman tinggal buat saja form textarea.
3. Config
Tinggal kita
set up alamat folder untuk menyimpan file gambar, pada tinymce/plugins/jbimages/config.php.
$config['img_path'] = '/sma/images'; // --> folder web di lokal / folder gambar hasil upload
$config['upload_path'] = $_SERVER['DOCUMENT_ROOT'] .
$config['img_path']; // Physical path. [Usually works fine like this]
Alamat foldernya di
public ya...