Návod na vlastní CKEditor Widget plugin pro tvorbu layoutu s podporou Boostrap 4 Grid systému - 1. část

CKEditor a ani Boostrap není třeba představovat. Kupodivu jsem ale nenašel žádný mě vyhovující plugin pro návrh layoutu s podporou Boostrap 4. Se základními znalostmi JavaScriptu jsem si ho nakonec napsal sám.

Pro webového programátora implementace Bootsrap Gridu není problém. A nějaký ten grid se hodí vždycky, protože nějaký ten dvojsloupec, n-sloupec… se používá velmi často, a je třeba myslet na responzivní zobrazení. Ale jak to má dokázat obyčejný uživatel tvořící obsah, co potřebuje "editor jako je Word"?

CKEditor logo

Kupodivu jsem pro CKEditor nenašel žádný plugin (https://ckeditor.com/cke4/addons/plugins/all), který by to řešil. Buď byl dělaný pro starší Boostrap 3, nebo byl placený, nebo byl až moc složitý a komplikovaný, anebo prostě nesplňoval, co jsem chtěl. Nicméně se z nějakých dá přinejmenším alespoň inspirovat - https://ckeditor.com/cke4/addon/btgrid.

A co jsem si to vymyslel za požadavky?

  • podpora základních layoutů, jako 6-6, 4-4-4, 9-3 …
  • volitelně zobrazit nad layoutem nadpis
  • možnost změny již existujícího layoutu, a to při zachování obsahu
  • možnost kopírování obsahu sloupce, a to i do jiného tabu (stejný prohlížeč)

V zásadě nic až tak nestandardního, stačí k tomu znát trochu JavaScript. Stejně to ale trochu práce dá.

Příprava CKEditoru

CKEditor od verze 4.3 podporuje tzv. widgety https://ckeditor.com/docs/ckeditor4/latest/guide/dev_widgets.html, což je přesně to, co jsem potřebovat. Obyčejný Dialog (https://ckeditor.com/docs/ckeditor4/latest/guide/plugin_sdk_sample_1.ht…) je málo.

Ve výchozím CKEditor není Widget (ani Widget Context Menu, Widget Section) zahrnutý, takže je nutno jej přidat v Builderu https://ckeditor.com/cke4/builder.

CKEditor Builder

Další věc, co se mi osvědčila během developmentu, je nastavení "CKEDITOR.timestamp, viz vlákno Force CKEDITOR to refresh config" https://stackoverflow.com/questions/14940452/force-ckeditor-to-refresh-…. Jinak by bylo třeba pořád řešit cache prohlížeče.

simplebox - ukázkový CKEditor plugin s podporou Widgetů

Nejdříve je třeba se trochu začít orientovat v tom, jak vlastně CKEditor funguje. Ideální je začít ukázkovými příklady, které jsou dobře zdokumentované:

CKEditor simplebox widget

Pokud se vám povede zprovoznit si ukázkový plugin - přitom nezapomeňte

Pak si v simpleboxu můžete zkusit něco změnit (třeba jen popisek), a jestli se to promítne po reloadu stránky (takže je cachování CKEditoru vyřešené), tak jsme připraveni se pustit do vlastního pluginu.

CKEditor plugin pro Boostrap 4 Grid Layout systém

Nejdřív trochu teorie, co je vlastně ten "Bootstrap 4 Grid System" https://getbootstrap.com/docs/4.0/layout/grid/ nebo https://www.w3schools.com/bootstrap4/bootstrap_grid_system.asp.

Ukázkový kód je třeba tento třísloupcový layout:

CKEditor simplebox widget

Náš plugin by měl umět (jak už bylo psáno na začátku)

  • podpora základních layoutů, jako 6-6, 4-4-4, 9-3 …
    • což znamená přidávat/mazat "col divy", a nastavovat jejich správné třídy
  • volitelně zobrazit nad layoutem nadpis
    • přidávat/mazat celý div
  • možnost změny již existujícího layout, a to při zachování obsahu
    • ukládat si do proměnných obsah "colů"
  • možnost kopírování obsahu sloupce, a to i do jiného tabu v rámci prohlížeče
    • použití LocalStorage - funkcí setItem() a getItem()

 A tady je ukázka, co bude dělat náš plugin, a jak vypadají jeho možnosti:

Boostrap Grid

bs4grid widget

bs4grid source
 

Shrnutí

V tomto článku jsme si ukázali, co je to CKEditor Widget, jak takový ukázkový widget vypadá a funguje. A také jsme si ukázali, jak takový Widget může fungovat pro tvorbu layoutu založeném na Boostrap 4 Grid systému. Jak to konkrétně udělat, si ukážeme příště.