Salah satu editor WYSIWYG terbaik yang didukung Laravel adalah Summernote. Bukan hanya Laravel Tapi Summernote bisa digunakan di berbagai ma...
Salah satu editor WYSIWYG terbaik yang didukung Laravel adalah Summernote. Bukan hanya Laravel Tapi Summernote bisa digunakan di berbagai macam bahasa pemrogaman Seperti PHP, HTML, dll. Itu mencentang semua kotak ketika datang ke fitur, pengeditan teks, integrasi server, dan pemformatan HTML. Anda juga dapat menggunakan Summernote untuk menempelkan gambar di halaman web Anda, mengedit blok teks - semuanya dalam waktu nyata. Ini memungkinkan Anda untuk melihat hasil halaman web akhir secara real time dan memberi Anda ide yang lebih baik tentang hasil kode. Ini adalah editor WYSIWYG yang sangat populer karena melayani lebih dari 6000 bintang di Github.
Saya pribadi telah menggunakan Summernote di salah satu proyek saya dan menemukan editor sangat membantu dan inventif. Karena fitur-fiturnya yang ramah pengguna banyak membantu saya membuat proyek saya berjalan dan berjalan dalam beberapa menit tanpa bug utama.
Sekarang setelah mendapatkan pengetahuan lengkap tentang keuntungannya, sekarang saatnya bagi Anda untuk mempelajari cara mengintegrasikan dan mengimplementasikan Summernote WYSIWYG dengan PHP.
Pada kesempatan ini admin akan berbagi tutorial menggunakan summernote menggunakan framework CSS Bootstrap 4 tanpa berlama lama lagi yok mulai codingnya.
1. Pertama buat sebuah projek baru didalam text editor kesayangan anda.
2. Include atau masukan bootstrap 4, anda bisa menggunakan cdn atau secara offline.
3. Jika sudah anda perlu memasukan / include entah itu cdn atau offline file dari summernotenya ( file css dan js )
4. Untuk lebih mempermudah kita menggunakan cdn saja karena menurut saya lebih simple.
5. Silahkan ketikan link berikut diprojek kita
<!-- Summernote by haliminfo.com -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.11/summernote-bs4.css" rel="stylesheet"></link>
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.11/summernote-bs4.js"></script>
<textarea name="mainPost" id="post"></textarea>Pastikan anda telah include jquery dan summenote js-nya, code dibawah ini diletakan di paling bawah dari kode tersebut
<script>
$(document).ready(function() {
$('#post').summernote({
placeholder: "Ketikan sesuatu disini . . .",
height: '400'
});
});
</script>maka pada tahap ini kita sudah mendapatkan summernote dan siap digunakan
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- Style -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.11/summernote-bs4.css" rel="stylesheet">
</head>
<body class="bg-light">
<header>
<div class="jumbotron bg-primary text-center text-white">
<h3>Summernote by <a class="text-white" href="http://www.haliminfo.com">Haliminfo.com</a></h3>
</div>
</header>
<div class="container mt-2 mb-5">
<textarea name="mainPost" id="post"></textarea>
</div>
<!-- JS Properti -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.11/summernote-bs4.js"></script>
<script>
$(document).ready(function() {
$('#post').summernote({
placeholder: "Ketikan sesuatu disini . . .",
height: '400'
});
});
</script>
</body>
</html>
COMMENTS