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:

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.

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:

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.

Podaj dalej:

Facebook

1

Twitter

Google+

0

Linkedin

Tumblr

0

Digg

email

Pinterest

1