Pracuj ciężko, a nie mądrze - sprawdzam który edytor jest najlepszy

Bredzę. Oczywistym jest, że clickbaitowe tytuły są najlepsze, a przysłowie które celowo przekręciłem brzmi dokładnie inaczej. W wielu branżach profesjonalista, prócz bagażu doświadczenia i wiedzy, nie może obyć się bez odpowiedniej "skrzynki z narzędziami". Programista zaopatrzy się zatem w odpowiedni sprzęt oaz przygotuje sobie odpowiednie środowisko pracy. Ja natomiast bawiąc się w bloggera próbuję sam zrobić sobie narzędzie do blogowania w celu nabycia doświadczenia, stawiając przed sobą wyzwania, realizując cele i pokonując trudności programistyczne. W związku z tym, miałem pisać o czymś innym czyli o postępach w tworzeniu swojego CMSa w ramach NodeJs lecz plany lubią się krzyżować i tak oto biorę dzisiaj na pulpit edytory WYSIWYG. Od tego, jak przebiegnie analiza porównawcza poszczególnych narzędzi wybiorę najlepszy edytor pod względem warunków jakie postawię.

Czym jest edytor WYSIWYG? Rozwijając skrót "What You See Is What You Get" czyli "to co widzisz jest tym co dostaniesz". Dla niewtajemniczonych takim edytorem który powinieneś przynajmniej kojarzyć jest Word. Kryteriami którymi zamierzam się kierować jest kompatybilność z NodeJS (npm), możliwości konfiguracyjne oraz najważniejsze - wsparcie dla wtyczek, szczególnie dla tych które pozwolą mi na łatwą i przyjemną edycję i publikację kodu na łamach bloga. Do tej pory korzystałem z Summernote i od niego zaczniemy podróż po krainie WYSIWYG.

Lista z "ejwsom editors", którą znalazłem przypadkiem, a z której czerpałem poniekąd informacje: https://github.com/JefMari/awesome-wysiwyg

Summernote

Jaki jest koń, każdy widzi, więc nie ma co się okłamywać - edytory są do siebie podobne. To kanon, który zostanie niezmieniony tak długo, jak podstawową formą wprowadzania danych jest klawiatura. Każdy ma pasek narzędzi oraz pole edycji. Skupmy się na funkcjonalności. Jak wygląda Summernote możesz się osobiście przekonać odwiedzając tą stronę. Ja tym czasem zaprezentuję go od strony technicznej.

Summernote stawia przed nami szereg wymagań takich jak doctype html5 oraz obecność jQuery. Na plus jest wsparcie Bootstrap ale jedynie wersji 3 oraz 4, Bootstrap 5 również nie wydaje się być wspierany, a szkoda. Ubolewam też przez brak wsparcia dla npm Ma wsparcie npm, rónież jakieś integracje np. dla Ruby, Angulara oraz webpack. W kwestii wtyczek dla syntaxów, są wtyczki ale działają średnio lub słabo. Przynajmniej te, które testowałem w ramach syntaxów. Wtyczki są co prawda wspierane ale w mało wyszukany sposób - na stronie z pluginami jest zamieszczona informacja o tym, że podstrona jest w budowie, a dalej są odnośniki do listy pluginów na GitHub'ie. :) Edytor na licencji MIT. Zapytasz więc czym wyróżnia się Summernote? Chyba niczym, stąd ta analiza.

Edit: podglądając generowany kod html edytor wydaje się wprowadzać tzw brud w kodzie. Dodam informację, jeśli zobaczę coś takiego w TinyMCE

https://summernote.org/ MIT

TinyMCE

Ten edytor robi dobre pierwsze wrażenie. Namiar na edytor tutaj. Edytor jest dostępny na licencji MIT. W przeciwieństwie do Summernote developer zamierzający korzystać z tej biblioteki nie odnosi wrażenia, że wyciąga stary zakurzony przedmiot z piwnicy. Od razu czuć, że narzędzie jest wspierane i ciągle rozwijane. Prócz kilku usług premium które wyróżniają TinyMCE jest bogaty i aktualny zakres integracji. Od klasycznego jQuery oraz Bootstrap, poprzez Ruby, Node (+ Express) aż na Angularze i React kończąc - a to nie wszystkie możliwości. Mnie interesuje klasycznie Bootstrap + jQuery lub wariant integracji nodejs + express. Ostatecznie, po drobnej refaktoryzacji cms'a udało mi się zastosować tą drugą opcję, z tego względu, że poprzez npm po prostu łatwiej zarządzać zależnościami i utrzymywać je aktualne.

W rezultacie integracja z blogiem okazała się dziecinnie prosta. Potrzebne pluginy dodałem bez większych problemów, wszystko w ramach jednego prostego npm i tinymce. Chętnie skończył bym poszukiwania na tym etapie.

Przykładowa konfiguracja, nic więcej nie trzeba.

tinymce.init({
  selector: 'textarea',
  height: 500,
  menubar: false,
  plugins: [
    'advlist autolink lists link image charmap print preview anchor',
    'searchreplace visualblocks code codesample fullscreen',
    'insertdatetime media table paste code help wordcount save emoticons'
  ],
  toolbar: 'undo redo | styleselect fontselect | bold italic underline | ' +
      'alignleft aligncenter alignright alignjustify | ' +
      'bullist numlist | link image | preview media fullscreen | ' +
      'forecolor backcolor emoticons code codesample save | help',
});

https://www.tiny.cloud/ MIT

Quill

Podobnie jak w przypadku poprzednika, Quill sprawia miłe wrażenie. Biblioteka na licencji MIT. Inaczej jest trochę z zastosowaniem, Quill jest zdecydowanie trudniejszy w konfiguracji od TinyMCE. Ponadto ma małe problemy jeśli chodzi o współpracę z textarea. Dokumentacja sugeruje zastosowanie diva i synchronizację treści z obszarem tekstowym, w rezultacie zrezygnowałem z dalszych testów, bo szkoda czasu.

https://quilljs.com/ MIT

CKEditor

Kolejny z (tak mi się wydaje) popularniejszych edytorów WYSIWYG. Tym razem licencjonowany GNU2. Wariant classic edytora w wersji podstawowej udało mi się uruchomić bez najmniejszych problemów tak jak w przypadku TinyMCE z tą różnicą, że plugin od zamieszczania wycinków kodu już nie chciał tak współpracować w związku z brakiem webpacka w moim projekcie. Utrudniłem sobie tym pracę podwójnie, być może kiedyś to zastosuję.

https://ckeditor.com/ GNU 2

Podsumowanie

Miałem zamieścić macierz z porównaniem poszczególnych edytorów oraz sprawdzić jeszcze kilka, lecz TinyMCE spełnia w zupełności moje wymagania jakim są prostota w drożeniu, konfiguracji oraz użytku. Na tym etapie nie potrzebuję nic skomplikowanego jeśli chodzi o etap wdrażania, wystarczająco czasu poświęciłem na refaktoryzację kodu w związku z mechaniką pluginów (funkcjonalność bloga jeśli chodzi o posty jest rozszerzeniem, mam w planach inne przeznaczenia dla tego silnika). Summernote nie jest taki zły sam w sobie, boli mnie słaba dostępność pluginów gdzie dla porównania TinyMCE uruchomiłem niemalże natychmiast. Może Ci się wydawać Drogi Czytelniku, że pozostała część analizy edytorów została wykonana niedbale, nic bardziej mylnego - po prostu szkoda czasu na siłowe próby uruchamiania się gryzącego się ze sobą kodu.