Iklan Billboard 970x250

Cara menggunakan Summernote Terbaru

Cara menggunakan Summernote Terbaru

Cara menggunakan Summernote Terbaru

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>
6. Selanjutnya kiya membuat suatu textarea yang diberi Id, Sebenarnya tidak harus textarea tapi karena kita menggunakan summernote untuk suatu text maka saya pikir bias pas saja 😃
<textarea name="mainPost" id="post"></textarea>
7. Lalu Ketik javascript dibawah ini,
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>
8. Selesai dan siap digunakan.
maka pada tahap ini kita sudah mendapatkan summernote dan siap digunakan
Cara menggunakan Summernote Terbaru
Full script dibawah ini
<!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>
Sekian dulu tutorial kali ini semoga bermanfaat dan berguna bagi semuanya. terimakasih . . .
SHARE
HalimInfo
Blogger, Content Creator, Developer, Graphic Designer, UI / UX Designer

Related Posts

Subscribe to get free updates

Post a Comment

Iklan Tengah Post

get more nice stuff
in your inbox

instantly by Subscribing to us. So you will get email everytime we post something new here

Contact Form

Name

Email *

Message *