10+ Angular 2 WYSIWYG’s

Ok so your boss wants you to code a WISSYWIGG editor for your brand new Angular 4 app? So where do you start, well some examples ofcourse. So without further adieu┬áhere are some Angular 2 WYSIWYG’s examples to get you started, and to keep your boss happy! ­čÖé

1. Angular 2 Tiny MCE WYSIWYG

Angular 2 Tiny MCE WYSIWYG
Angular 2 Tiny MCE WYSIWYG

The absolutely easiest way to get started using TinyMCE with Angular2 is with the marvelous angular-cli

Article Demo

2. Angular 2 JS Froala WYSIWYG Editor

Angular 2 JS Froala WYSIWYG Editor
Angular 2 JS Froala WYSIWYG Editor

The default theme of the WYSIWYG HTML editor can be changed to one that better fits the color palette of your website. You can also create your own theme and customize the rich text editor’s interface the way you want using the customizer.

Article Demo Code

3. Codepen ng2 Inline Edit Example

Codepen NG2 Inline Edit Example
Codepen ng2 Inline Edit Example

Angular-xeditable is a bundle of AngularJS directives that allows you to create editable elements. Such technique is also known as click-to-edit or edit-in-place.

Demo

4. ng2 Edit Inline with Buttons

ng2 Edit Inline with Buttons
ng2 Edit Inline with Buttons

ng2-inline-editor is a library of Angular (version 2.0+ or 4) that allows you to create editable elements. Such technique is also known as click-to-edit or edit-in-place.

Demo

5. ng2 Inline Editor

ng2 Inline Editor
ng2 Inline Editor

Native UI Inline-editor Angular (4.0+) component. Basically it does not depend on any libraries except Angular4 itself. For themes you may need to include Twitter Bootstrap CSS.

Demo Code

6. Summnote Editor

Summnote Editor
Summnote Editor

The fastest way to get Summernote is to download the precompiled and minified versions of our CSS, JavaScript. No documentation or original source code files are included.

Demo

7. TextAngular (Angular 1.5 only)

TextAngular (Angular 1.5 only)
TextAngular (Angular 1.5 only)

A radically powerful Text-Editor/Wysiwyg editor for Angular.js! Create multiple editor instances, two-way-bind HTML content, watch editors for changes and more!

Website Angular 2

8. TextBox.io

TextBox.io
TextBox.io

Textbox.io is the first WYSIWYG HTML editor designed for desktop and mobile devices. Its revolutionary app-like mobile UI delivers an optimized UI for tablet and handset users.

Website

9. Angular 2 Wysiwig

Angular 2 Wysiwig
Angular 2 Wysiwig

WSYWIG editors are sometimes a necessity in our development lives. Using TinyMce is actually very easy. In order to start using TinyMce we need to install the dependency. There is an npm module for tinymce.

Website

Sam Deering

Sam Deering

Sam is a web developer, online entrepreneur and investor. In his spare time he enjoys coding, playing chess and sharing what he learns with others.

Leave a Reply

Your email address will not be published. Required fields are marked *