Edytory WYSIWYG w JavaScript, jQuery i HTML5

editor

Poziom średnio-zaawansowany

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.

redactor-wysiwyg

Strona projektu:

http://imperavi.com/redactor/

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.

wysihtml5

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ć.

cleditor

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.

ckeditor

Strona projektu:

http://ckeditor.com/

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.

Web Developer ze sporym bagażem doświadczeń.
Języki: xhtml, html5, css3, js, php, python, java.
Hobby: programowanie gier (browser, mobile).

Podaj dalej: Share on Facebook1Tweet about this on TwitterShare on Google+1Share on LinkedIn1Share on Tumblr0Digg thisEmail this to someonePin on Pinterest1
Możesz skomentować leave a response, lub podać trackback z własnej strony.