
Witam. Dziś mały spis edytorów WYSIWYG. Bazują one oczywiście na JavaScript, ale także na nowszych możliwościach, oferowanych przez HTML5.
Edytory WYSIWYG
Czasem zachodzi potrzeba dodania do projektu (np. panel administracyjny CMS, opisy produktu w e-sklepie) aplikacji WWW. Dostępnych jest wiele gotowych do użycia, bardzo dobrych rozwiązań. Przedstawiamy wybrane z nich.
1. Redactor WYSIWYG
Jest to łatwa w użyciu wtyczka jQuery implementująca WYSIWYG. Jest to dobrze zaprojektowany, elastyczny edytor z dobrym UX.
Strona projektu:
2. Edytor wysihtml5
Ten projekt został stworzony w oparciu o HTML5 i JavaScript, nie potrzebuje jQuery. Duży plus za cross-browser – obsługuje popularne przeglądarki.
Strona projektu:
http://xing.github.io/wysihtml5/
3. CLEditor
Kolejny edytor oferujący spore możliwości, a przy tym bardzo lekki. Łatwo go zainstalować i konfigurować.
Strona projektu:
http://premiumsoftware.net/cleditor/
4. CKEditor
Rozbudowany i bardzo popularny, otwarto-źródłowy edytor WYSIWYG. Posiada duże możliwości dostosowywania, w tym także skiny i rozszerzenia.
Strona projektu:
Dojo
Dojo Toolkit w swej potędze oferuje także możliwości szybkiej implementacji edytora WYSIWYG.
Możemy dodać do naszego projektu solidny edytor dzięki rozszerzeniu:
http://dojotoolkit.org/documentation/tutorials/1.9/editor/
// load the editor resource require(["dijit/Editor", "dojo/domReady!"], function(Editor){ var editor = new Editor({ plugins: ["bold","italic","|","cut","copy","paste","|", "insertUnorderedList"] }, "myEditor"); editor.startup(); });
Tworzenie edytora z Quill
Dzięki rozwiązaniu Quill, możemy wykreować własny edytor WYSIWYG z wybranymi opcjami i dostosowanym wyglądem.
Polecam artykuł o tworzeniu edytora z Quill:
http://www.developerdrive.com/2014/06/how-to-create-a-rich-text-editor-with-quill/
Podsumowanie
To wszystko na dziś. Jak widać, gdy potrzebujemy edytora WYSIWYG do naszego projektu, nie ma większych problemów ze znalezieniem dobrego, odpowiedniego dla naszych potrzeb rozwiązania.