Wie füge ich den Summernote Editor mithilfe von Javascript zu einer Webseite hinzu?

Um den Summernote-Editor zu einer Webseite hinzuzufügen, müssen wir zunächst die Summernote-CSS- und JS-Dateien in den Kopf des HTML-Dokuments einfügen. Als nächstes müssen wir den Summernote-Editor für einen bestimmten Textbereich oder ein div-Element initialisieren, indem wir die Summernote-Funktion aufrufen. Schließlich können wir die Optionen und Funktionen des Editors anpassen, indem wir die Optionen als Objekte an die Summernote-Funktion übergeben.

Lassen Sie uns zunächst verstehen, was der Summernote-Editor ist.

Was ist Summernote?

• Summernote ist eine JavaScript-Bibliothek, die das Erstellen und Bearbeiten von Rich Text in Webseiten ermöglicht.

• Es handelt sich um einen WYSIWYG-Editor (What You See Is What You Get), der eine benutzerfreundliche Textformatierungsoberfläche bietet.

• Summernote unterstützt mehrere Funktionen wie Textformatierung, Listen, Bilder, Videos und Links.

• Es ist einfach zu integrieren und anzupassen und bietet mehrere Optionen und Plugins.

• Summernote ist Open Source und wird aktiv gepflegt, mit einer starken Community und regelmäßigen Updates.

Wir werden HTML + jQuery verwenden, um den Summernote-Editor zu integrieren. Lassen Sie uns die gleiche Methode besprechen.

Methode

• Fügen Sie Summernote-CSS- und JavaScript-Dateien in den Kopf Ihres HTML-Dokuments ein -

<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>

• Erstellen Sie ein Textarea-Element in HTML, um den Summernote-Editor anzuzeigen -

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

• Initialisieren Sie in einer JavaScript-Datei den Summernote-Editor für das Textarea-Element -

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

• Wenn Sie die Optionen des Summernote-Editors anpassen möchten, können Sie das Optionsobjekt an die Funktion Summernote() übergeben -

$(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
   });
});

• Um auf den Inhalt des Editors zuzugreifen, können Sie die Funktion code() -

verwenden

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

• Um den Inhalt des Editors festzulegen, können Sie die Funktion code() verwenden und den Inhalt als String übergeben -

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

• Inhalte mithilfe der Ajax-Methode auf dem Server speichern -

$('#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');
      }
   });
});

Das ist es! Ihr Summernote-Editor sollte jetzt an Ihren Webseiten arbeiten.

Beispiel

   
   
   
   

   
      <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>
   

Anleitung

In diesem Beispiel haben wir ein Textbereichselement mit der ID „summernote“, in dem der Summernote-Editor angezeigt wird. Wir fügen die Summernote-CSS- und JavaScript-Dateien am Kopf des Dokuments ein und schließen auch die jQuery-Bibliothek ein, da es sich um eine Abhängigkeit von Summernote handelt.

Im Skriptabschnitt initialisieren wir den Summernote-Editor für das Textarea-Element mit einigen Optionen. Wir haben auch eine Schaltfläche mit der ID „Speichern“, die beim Klicken den Inhalt des Editors mithilfe einer Ajax-Anfrage auf dem Server speichert.

Das obige ist der detaillierte Inhalt vonWie füge ich den Summernote Editor mithilfe von Javascript zu einer Webseite hinzu?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!