How to add custom buttons to ngx-wig?

You can extend ngx-wig by creating custom plugins, as shown in the StackBlitz example for adding own buttons. This involves defining button logic and integrating it with the toolbar, but it requires additional Angular component work.

ngx-wig vs Quill for Angular – which is better?

ngx-wig is lighter and more Angular-native with no jQuery, ideal for simple formatting in forms, while Quill offers more features like images and tables but is heavier. Choose based on feature needs versus bundle size.

Does ngx-wig support image upload?

No, ngx-wig does not natively support image upload or media embedding; it's focused on basic text formatting. For image handling, you'd need to implement custom solutions or integrate another library.

How to handle paste events to clean up styles in ngx-wig?

Use the NgxWigFilterService, such as NgxWigFilterStylesService, to filter or remove extra styles on paste, as demonstrated in the filtering demo. This requires provider configuration in your Angular module.

What icon sets can I use with ngx-wig?

Any icon set works, but Material Design Icons are recommended in the README. You can also use custom SVGs by encoding them, giving flexibility but requiring external dependencies or setup.

Is ngx-wig accessible for screen readers?

The README doesn't mention built-in accessibility features, so developers must ensure proper ARIA labels and keyboard navigation manually, which might be a drawback for accessibility-focused projects.

Open-Awesome

ngx-wig

Apache-2.0TypeScript

A lightweight Angular WYSIWYG rich text editor component with no jQuery dependencies.

GitHub

234 stars55 forks0 contributors

What is ngx-wig?

ngx-wig is an Angular WYSIWYG HTML rich text editor component that allows users to format text directly in Angular applications. It solves the need for a lightweight, dependency-free editor that integrates seamlessly with Angular's forms and data binding. The project is a fork of ngWig, updated for modern Angular versions.

Target Audience

Angular developers who need to embed a rich text editor in forms, admin panels, or content management interfaces within their applications.

Value Proposition

Developers choose ngx-wig because it's built purely for Angular without jQuery, reducing bundle size and complexity. It offers straightforward integration with Angular forms, customizable buttons, and flexibility in icon usage.

Overview

Angular(also Angular 17) WYSIWYG HTML Rich Text Editor (from ngWig - https://github.com/stevermeister/ngWig)

Use Cases

Best For

Adding rich text editing to Angular-based admin dashboards
Building content management forms in Angular applications
Creating comment or post editors with custom formatting options
Integrating WYSIWYG editors into Angular reactive or template-driven forms
Projects requiring a lightweight editor without jQuery dependencies
Applications needing version-specific support for Angular 13 through 21

Not Ideal For

Projects requiring advanced rich text features like image uploads, tables, or media embedding
Applications with strict accessibility requirements needing built-in WCAG compliance
Teams that want a fully styled, out-of-the-box editor with bundled icons and minimal setup
Projects using Angular versions outside the 13-21 range, such as legacy or cutting-edge releases

Pros & Cons

Pros

Angular Native Integration

Seamlessly works with Angular's forms and data binding, supporting ngModel, FormControl, and content binding, as shown in the demos for reactive and template-driven forms.

Lightweight and Dependency-Free

Built purely for Angular with no jQuery or heavy dependencies, reducing bundle size and complexity, as emphasized in the README's dependencies section.

Customizable Toolbar

Allows developers to specify which formatting buttons are displayed via the buttons attribute, demonstrated in the 'Set buttons' example for tailored interfaces.

Version Compatibility

Offers dedicated packages for Angular versions 13 through 21, ensuring easy installation and updates without breaking changes, as listed in the Angular support section.

Cons

Limited Feature Set

Only provides basic text formatting buttons; lacks advanced features common in richer editors, such as image handling or table editing, which might require workarounds.

No Built-in Icons

Requires manual setup for icons using external sets like Material Design Icons, adding extra steps and potential dependencies for development, as noted in the icons section.

Minimal Built-in Styling

Offers basic CSS, so extensive custom styling is often needed for a polished look, which can increase development time compared to pre-styled alternatives.

Frequently Asked Questions

Related Projects

ngx-quill

Angular (>=2) components for the Quill Rich Text Editor

Stars1,850

Forks273

Last commit9 days ago

angular2-froala-wysiwyg

Angular 4, 5, 6, 7, 8 and 9 plugin for Froala WYSIWYG HTML Rich Text Editor.

Stars739

Forks203

Last commit18 days ago

angular-editor

A simple native WYSIWYG editor component for Angular 6 -20+

Stars715

Forks355

Last commit4 months ago

ngx-editor

🖋️ Rich Text Editor for angular using ProseMirror

Stars500

Forks206

Last commit7 months ago

Community-curated · Updated weekly · 100% open source

Found a gem we're missing?

Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.

Submit a project Star on GitHub