• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

Jaranguda

Belajar Mengajar

  • Home
  • Sponsor/Jasa
  • Tentang

Menambah TinyMCE kedalam Textarea PHP HTML

Last Updated on 20 September 2017 By tommy Leave a Comment

TinyMCE adalah HTML WYSIWYG editor, sehingga untuk mengetikkan teks menambah huruf tebal, miring, dan yang lainnya menjadi sangat mudah, dan hasilnya bila disimpan kedalam database otomatis dalam format tag html, sehingga memudahkan membantu dalam mengedit kalimat.

Buat sebuah form dengan HTML, misalkan berisi judul, subjudul dan artikel.

<html>
	<title>Tutorial Menambah TinyMCE kedalam PHP</title>
<head></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>

Tampilan form diatas
form html
Sebelum menambahkan TinyMCE kedalam form yang kita gunakan, download terlebih source codenya dari download page
Ekstrak file yang baru anda download, lalu letakkan di folder yang sama dengan form HTML diatas. Lalu panggil dari form diatas dengan cara menambahkan diantara code

<head>
<script type="text/javascript" src="tinymce/jscripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({
        	// General options
        	mode : "textareas",
        	theme : "advanced",
});
</script>
</head>

pada bagian mode diatas adalah untuk merubah tampilan textarea menjadi semacam text editor, untuk lengkapnya bisa dibaca di Wiki Configuration TinyMCE.
Code lengkap untuk script diatas adalah

<head>
<html>
	<title>Tutorial Menambah TinyMCE kedalam PHP</title>
<head>
<script type="text/javascript" src="tinymce/jscripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({
        	// General options
        	mode : "textareas",
        	theme : "advanced",
});
</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>

lihat perbedaannya setelah di tambahkan TinyMCE seperti gambar dibawah ini
tinymce html php

Last Updated on 20 September 2017 by tommy

Tulisan menarik lainnya

  • Menambah Teks Kedalam Gambar dengan PHP

    Di PHP terdapat library GD yang memungkinkan untuk memanipulasi gambar, tetapi pastikan library GD sudah…

  • Convert Markdown ke HTML dengan PHP

    Convert/Konversi dari markdwon ke HTML dengan PHP sangat mudah dengan bantuan library Parsedown. Kita akan…

  • Membuat Script Kontak Form dengan PHP

    Dengan menambahkan kontak form di website yang dibuat, bisa menjadi alternative untuk berkomunikasi dengan pemilik…

  • Feed Reader Sederhana dengan PHP

    Untuk parsing data feed dari website, kita akan menggunakan SimplePie. Download terlebih dahulu SimplePie dari…

Filed Under: PHP Tagged With: html, tinymce

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

Pencarian

Tanya Jawab tentang DevOps SRE CPE, gabung di https://t.me/devopsindonesia

Terbaru

  • Solusi AWS CLI SSL VALIDATION failed
  • Monitoring Kubernetes Cluster dengan Prometheus
  • Solusi Playwright Firefox version `GLIBCXX_3.4.30′ not found (required by /lib64/libicuuc.so.69)
  • Cara Upgrade Fedora 35 ke Fedora 36
  • Ekstrak Gzip File dan Ambil Total dengan Python

Komentar

  • Xpud on Script PHP untuk Mengambil History Lagu Shoutcast v2.5
  • Jrenx on Membuat Bot Telegram Sederhana dengan PHP
  • Sella on Kemana Menghilangnya Saldo BCA 50 ribu
  • Rian on Mengganti Halaman Error Laravel
  • Suchie on Kemana Menghilangnya Saldo BCA 50 ribu

Tulisan Populer

  • Password Router Huawei HG8245H5 Indihome 1m views
  • Password Terbaru ZTE F609 Indihome 781.5k views
  • Password Superadmin Huawei HG8245A 294.2k views
  • Cara Setting Manual Modem GPON ZTE F609 Indihome 267.8k views
  • Cara Setting Wireless ZTE F609 Indihome 251k views
  • Mengaktifkan Port LAN di Huawei HG8245 Indihome 165.4k views
  • Akses UseeTV Indihome via Wireless ZTE F609 154.7k views
  • Cara Reset Password ZTE F609 Indihome 146k views
  • Kemana Menghilangnya Saldo BCA 50 ribu 135.2k views
  • Cara Setting DHCP Server Modem/Router ZTE F609 108.9k views

Kategori

  • Delphi
  • dll
  • Gambas
  • Internet
  • Java
  • Lazarus
  • Linux
  • PHP
  • Review
  • Teknologi

Sponsor

kadal.id
Untuk jadi sponsor, hubungi kita lewat halaman sponsor
© 2021. Jaranguda
  • Linux
  • PHP
  • Internet
  • Teknologi
  • Delphi
  • Gambas
  • Java