Jak użyć na stronie edytor Summernote

Witam Wszystkich

Zaznaczę na wstępnie że dopiero zaczyna tworzyć strony więc proszę o wyrozumiałość.

Otóż problem polega na tym że chcę na stronie HTML5 użyć edytora treści Summernote.org Czytałem na stronie jak to zaimplementować coś tam próbowałem ale na razie jestem za słaby żeby to ogarnąć.

Potrzebuję przykładu kodu strony z implementacją edycji treści za pomocą summernote tak żeby to działało czyli po wpisaniu czegoś w edytorze summernote żeby to zapisywało się na konkretnej stronie.

Ja zrobiłem takie coś:

http://omnibus24.online/test/index2.html

Ale to działa że wyświetla na tej stronie a po odświeżeniu wracamy do punktu wyjścia, a jak to przerobić żeby edytowało określony fragment strony i trwale go zapisywało.

Proszę o pomoc i przykładowy kod jak to zrobić.

Jak rozumiem, działasz wewnątrz klienta (przegladarki) kodem w JS
Cokolwiek chcesz zrobić "trwałe" to musi angażować server-side.
Nawet wróżki nie wiedzą w jakim języku uprawiasz stronę serwerową (backend)

O ile dobrze rozumiem Twoje pytanie to strona w której chcę wykonać edycję jest w Bootstrap

ZrobieDobrze napisał(a):

Jak rozumiem, działasz wewnątrz klienta (przegladarki) kodem w JS
Cokolwiek chcesz zrobić "trwałe" to musi angażować server-side.
Nawet wróżki nie wiedzą w jakim języku uprawiasz stronę serwerową (backend)

Jeżeli ten edytor ma zdarzenie wyzwalane po każdym napisanym znaku, to w tym zdarzeniu można zrobić zapisanie treści w Local Storage, a przy wczytywaniu strony, wczytać treść z Local Storage. W takim przypadku server-side nie jest potrzebny i nie jest ważne w czym zrobiony. Nawet bez server-side (plik HTML z dysku) to zadziała.

Nawet, jeżeli nie ma możliwości wyzwalania zdarzenia po każdej zmianie tekstu, to można wyzwalać zdarzenie np. co pół sekundy i zapisywać w Local Storage.

OK a jakiś przykład kodu jak to w praktyce zrobić? :)

Zakładając, że element o id='editor' to miejsce, gdzie chcesz zaczepić summernote'a i pod $ masz jQuery:

$('#editor').summernote({
  callbacks: {
      onInit: function() { 
              // inicjalizacja zawartości edytora na podstawie wartości odczytanej z localStorage
              let editorContent = localStorage.getItem('editorContent');
              if (editorContent){               
                  $(this).summernote('code', editorContent);
              } 
          }
      },
      onChange: function(contents, $editable){
          // aktualizacja localStorage po wprowadzeniu zmian w treści w edytorze
          localStorage.setItem('editorContent', contents);
      }
  }
});