Bagaimana untuk menambah Editor Summernote ke halaman web menggunakan Javascript?

Untuk menambahkan editor Summernote pada halaman web, kami perlu memasukkan fail Summernote CSS dan JS di kepala dokumen HTML terlebih dahulu. Seterusnya, kita perlu memulakan editor Summernote pada kawasan teks atau elemen div tertentu dengan memanggil fungsi Summernote. Akhir sekali, kami boleh menyesuaikan pilihan dan fungsi editor dengan menghantar pilihan sebagai objek kepada fungsi Summernote.

Mari kita fahami dahulu apa itu editor Summernote.

Apakah Summernote?

• Summernote ialah perpustakaan JavaScript yang membolehkan mencipta dan mengedit teks kaya dalam halaman web.

• Ia ialah editor WYSIWYG (What You See Is What You Get) yang menyediakan antara muka pemformatan teks yang mesra pengguna.

• Summernote menyokong berbilang ciri seperti pemformatan teks, senarai, imej, video dan pautan.

• Mudah untuk disepadukan dan disesuaikan, menawarkan berbilang pilihan dan pemalam.

• Summernote ialah sumber terbuka dan diselenggara secara aktif, dengan komuniti yang kukuh dan kemas kini yang kerap.

Kami akan menggunakan HTML + jQuery untuk menyepadukan editor Summernote. Mari kita bincangkan kaedah yang sama.

Kaedah

• Sertakan Summernote CSS dan fail JavaScript dalam kepala dokumen HTML anda -

<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.16/dist/summernote-lite.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.16/dist/summernote-lite.min.js"></script>

• Buat elemen textarea dalam HTML untuk memaparkan editor Summernote -

<textarea id="summernote"></textarea>

• Dalam fail JavaScript, mulakan editor Summernote pada elemen textarea -

$(document).ready(function() {
   $('#summernote').summernote();
});

• Jika anda ingin menyesuaikan pilihan editor Summernote, anda boleh menghantar objek pilihan ke fungsi Summernote() -

$(document).ready(function() {
   $('#summernote').summernote({
      height: 300, // set editor height
      minHeight: null, // set minimum height of editor
      maxHeight: null, // set maximum height of editor
      focus: true // set focus to editable area after initializing summernote
   });
});

• Untuk mengakses kandungan editor anda boleh menggunakan fungsi kod() -

var content = $('#summernote').summernote('code');

• Untuk menetapkan kandungan editor anda boleh menggunakan fungsi kod() dan menghantar kandungan sebagai rentetan -

$('#summernote').summernote('code', '<p>This is the content of the editor.</p>');

• Simpan kandungan ke pelayan menggunakan kaedah ajax -

$('#save').click(function(){
   var aHTML = $('.summernote').code(); //save HTML If you need(aHTML: array).
   $('.summernote').destroy();
   $.ajax({
      url: '/save',
      type: 'post',
      data: {content: aHTML},
      success: function(){
         alert('Your content was successfully saved');
      }
   });
});

Itu sahaja! Editor Summernote anda kini sepatutnya berfungsi pada halaman web anda.

Contoh

   
   
   
   

   
      <textarea id="summernote"></textarea>
      Save
      <script>
         $(document).ready(function() {
            $('#summernote').summernote({
               height: 300, // set editor height
               minHeight: null, // set minimum height of editor
               maxHeight: null, // set maximum height of editor
               focus: true // set focus to editable area after initializing summernote
            });
         });
         $('#save').click(function(){
            var aHTML = $('.summernote').code(); //save HTML If you need(aHTML: array).
            $('.summernote').destroy();
            $.ajax({
               url: '/save',
               type: 'post',
               data: {content: aHTML},
               success: function(){
                  alert('Your content was successfully saved');
               }
            });
         });
      </script>
   

Arahan

Dalam contoh ini, kami mempunyai elemen textarea dengan id "summernote" di mana editor Summernote akan muncul. Kami menyertakan fail Summernote CSS dan JavaScript di kepala dokumen dan juga menyertakan perpustakaan jQuery kerana ia adalah kebergantungan Summernote.

Dalam bahagian skrip, kami memulakan editor Summernote pada elemen textarea dengan beberapa pilihan. Kami juga mempunyai butang dengan ID "simpan" yang apabila diklik akan menyimpan kandungan editor ke pelayan menggunakan permintaan ajax.

Atas ialah kandungan terperinci Bagaimana untuk menambah Editor Summernote ke halaman web menggunakan Javascript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!