WYSIWYG editory pro webovou aplikaci

Hledám pro jednu webovou aplikaci vhodný vizuální editor, tak sem sepisuji pro sebe a kolegy poznámky ohledně funkcí, které jsou pro nás důležité.

CK Editor 4

Pro běžný uživatelský vstup je OK, obsahuje vše potřebné, mobily: OK, customizace: OK

Upload obrázků: ano, ale proces má zbytečně moc kroků: 1) kliknu na ikonu přidat obrázek > 2) Otevře se okno Image info, kde lze zadat URL obrázku > 3) Musím kliknout na záložku Upload > 4) kliknout na Choose file a vybrat obrázek > 5) Kliknout na tlačítko Send it to server (proč se to jmenuje zrovna takto nehápu, bohužel pak význam nechápou běžní uživatelé) > 6) jsem zpět na záložce Image info > 7) tlačítko OK a hurá. mám obrázek vložený. Uf.

Změna velikosti vloženého obrázku: na počítači se po dvojkliku otevře File info a mám možnost zadat rozměry v pixelech. Případně je možnost rozměry změnit myší přetažením bodu na okraji obrázku. To funguje dobře. Na mobilu vidím taky tečku na okraji, ale bohužel nelze nijak uchopit a přetáhnout (Android) a navíc se tam pořád plete klávesnice.

Další operace s obrázky: ani rotaci, ani oříznutí, filtry apod. jsem nenašel.

Vložení videa: lze jen vložit URL, nikoliv uploadovat

CK Editor 5

Pro běžný uživatelský vstup je OK, obsahuje vše potřebné. Mobily: OK, customizace: OK

Upload obrázků: ano, oproti předchůdci výrazně jednodušší: 1) kliknu na ikonu přidat obrázek > 2) vyberu obrázek > 3) Hotovo. Paráda.

Změna velikosti vloženého obrázku: oproti v4 nefunguje dvojklik/dvojtap a stejně se chová i tečka na borderu – v desktopu funguje krásně a na mobilu je taky, ale nejde ji uchopit a použít. Lze ale definovat, že při kliknutí na obrázek se v kontextové nabídce zobrazí také tlačítka pro zmenšení obrázku.

Další operace s obrázky: ani rotaci, ani oříznutí, filtry apod. jsem nenašel.

Pro CKE existuje plugin JS.plus image editor, který umí funkce crop, rotate, resize, corners, draw, type, shapes, stickers a frame. Vypadá to hezky – vybere se obrázek a v menu se musí kliknout na ikonku tohoto pluginu, tím se otevře okno. Zkoušel jsem demo na jejich webu v mobilu a trochu to leze z obrazovky, ale možná to je jen chybou implementace na stránkách, nevím.

Vložení videa: lze jen vložit URL, nikoliv upload

U obou verzí CK Editoru jsem v dokumentaci našel taky zmínku o tzv. Custom uploaders, které přidávají další možnosti. Výrobce CK Editoru – polský CK Source nabízí vlastní uploader Easy Image, založený na cloudovém řešení (upload, optimalizace, responsivita, CDN atd.). Také nabízí druhý uploader CKFinder, který přidává funkce pro organizaci souborů. Editační funkce obrázků jsem ani v jednom také nenašel.

TinyMCE

Velmi rozšířený editor, když potřebujete základní i pokročilé úpravy, tak to většinou TinyMCE má.

Mobily: OK

Customizace: OK

Upload obrázků: ano, ale je to zase složité – na první straně se objeví URL, 2) musí se jít do záložky Upload > kliknout na Browse > vybrat obrázek > kliknout na Save. Na mobilu se mi nepovedlo v demu obrázek vůbec nahrát – nenašel jsem vůbec možnost Upload.

Změna velikosti vloženého obrázku: to má TinyMCE vyřešené hezky v pluginu Image tools– kliknu v editoru na obrázek, objeví se kontextová nabídka ikon rotate, flip a edit apod. Resize se mi na mobilu přetahováním nepodařilo, je třeba zadat hodnoty.

Froala

Další wysiwyg editor, který není špatný, pracuje se s ním klasicky jako s předchozími. Práce s obrázky – kliknu na ikonu > kliknu na upload > vyber a vložím, to je docela dobré. Po kliknutí na obrázek se označí rohy a lze jimi měnit velikost – při troše šikovnosti to šlo i na mobilu. Rotace, flip a další nástroje lze najít až po kliknutí na ekvalizér – tím se otevče Toast UI editor (další plugin?) a lze si s obrázkem hrát. Ale už je to takové složitější a komplexnější.