Cara Memasukkan Teks Editor di HTML dengan Javascript

Teks Editor merupakan sebuah form khusus yang memiliki fitur-fitur seperti membuat sebuah teks menjadi bolditalicunderlinedan lain-lain, secara sederhananya, ketika kamu membuat sebuah artikel baru di blogspot / wordpress, terdapat sebuah form khusus untuk menempatkan isi artikelnya, form itu merupakan sebuah Teks Editor, berikut contoh gambarnya.

Capture1 9

Teks Editor itu merupakan sebuah teks editor yang bernama summernotesummernote ini merupakan sebuah plugins HTML yang dirancang secara open source dan bebas digunakan oleh siapapun, kamu bisa menambahkan atau memasangnya di situs standalone kamu atau yang lainnya, berikut tutorialnya.

Cara Memasukkan Teks Editor di HTML dengan Javascript

1. Kamu masukkan beberapa berkas js/css pada kode HTML kamu.

    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.11/summernote-lite.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.11/summernote-lite.js"></script>

2. Lalu pada akhir script, kamu masukkan kode javascript di bawah ini.

    <script>
      $('#summernote').summernote({
        placeholder: 'inwepo.co',
        tabsize: 2,
        height: 100
      });
    </script>

3. Lalu kamu letakan tag <div> ini ditempat yang kamu munculkan sebuah Teks Editornya.

<div id="summernote"></div>

4. Selesai.

Contoh Lengkapnya

Berikut ini contoh lengkap dari beberapa kode penting di atas.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Summernote</title>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.11/summernote-lite.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.11/summernote-lite.js"></script>
  </head>
  <body>
    <div id="summernote"></div>
    <script>
      $('#summernote').summernote({
        placeholder: 'inwepo.co',
        tabsize: 2,
        height: 100
      });
    </script>
  </body>
</html>

Catatan: Teks Editor ini merupakan Teks Editor yang paling mudah cara pemasangannya dan tampilannya yang sangat user-friendly dan mampu membuat tampilannya responsif sesuai script CSS dan HTML yang kamu buat.

Demikian tutorial cara memasukkan teks editor di HTML dengan Javascript. Selamat mencoba.

Komentar

Leave a Reply

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

Trending Minggu Ini

Inwepo adalah media platform yang membantu setiap orang untuk belajar dan berbagi tutorial, tips dan trik cara penyelesaian suatu masalah di kehidupan sehari-hari dalam bentuk teks, gambar. dan video.

Dengan bergabung bersama kami dan membuat 1 tutorial terbaik yang kamu miliki dapat membantu jutaan orang di Indonesia untuk mendapatkan solusinya. Ayo berbagi tutorial terbaikmu.

Ikuti Kami di Sosmed

Inwepo Navigasi

Tentang Kami             Beranda

Hubungi Kami             Panduan Penulis

Kebijakan Privasi

FAQ

Partner

Copyright © 2014 - 2023 Inwepo - All Rights Reserved.

To Top