Summernote

The ContentTools WYSIWYG editor can be added to any HTML page in a few simple steps. The getting started guide shows how. Full API documentation and examples for the ContentTools family of libraries. Step-by-step guides for common use scenarios as well as more advanced topics for those rolling their own editors. The ContentTools family of libraries is free and open-source. The libraries are hosted, developed and maintained on GitHub. Each block of content on the page can be dragged to a new location. Non-text based elements such as images and videos can be dragged by clicking in the center of the element and dragging. For text elements you need to click and hold. This pause is implemented to allow you to freely select sections of text using the mouse without triggering the drag behaviour.

Compose beautifully formatted text in your web application. Trix is an editor for writing messages, comments, articles, and lists, the simple documents most web apps are made of. It features a sophisticated document model, support for embedded attachments, and outputs terse and consistent HTML. Most WYSIWYG editors are wrappers around HTML’s contenteditable and execCommand APIs, designed by Microsoft to support live editing of web pages in Internet Explorer 5.5, and eventually reverse-engineered and copied by other browsers. Because these APIs were never fully specified or documented, and because WYSIWYG HTML editors are enormous in scope, each browser’s implementation has its own set of bugs and quirks, and JavaScript developers are left to resolve the inconsistencies. Trix sidesteps these inconsistencies by treating contenteditable as an I/O device: when input makes its way to the editor, Trix converts that input into an editing operation on its internal document model.