All Projects → stevermeister → Ngx Wig

stevermeister / Ngx Wig

Angular(...Angular 7, Angular 8, Angular 9, Angular 10, Angular 11) WYSIWYG HTML Rich Text Editor (from ngWig - https://github.com/stevermeister/ngWig)

Programming Languages

typescript
32286 projects

Projects that are alternatives of or similar to Ngx Wig

Angular Froala Wysiwyg
Angular 4, 5, 6, 7, 8 and 9 plugin for Froala WYSIWYG HTML Rich Text Editor.
Stars: ✭ 696 (+291.01%)
Mutual labels:  text-editor, wysiwyg, angular2
svelte-slate
slate svelte view layer
Stars: ✭ 43 (-75.84%)
Mutual labels:  wysiwyg, text-editor
ember-pell
Ember addon for simplest and smallest (1kB) WYSIWYG text editor for web, with no dependencies
Stars: ✭ 56 (-68.54%)
Mutual labels:  wysiwyg, text-editor
typester
✒️ A WYSIWYG that gives you predictable and clean HTML
Stars: ✭ 29 (-83.71%)
Mutual labels:  wysiwyg, text-editor
Vue Trumbowyg
Vue.js component for Trumbowyg WYSIWYG editor 📝
Stars: ✭ 224 (+25.84%)
Mutual labels:  text-editor, wysiwyg
bangle.dev
Collection of higher level rich text editing tools. It powers the local only note taking app https://bangle.io
Stars: ✭ 541 (+203.93%)
Mutual labels:  wysiwyg, text-editor
am-editor
A rich text collaborative editor framework that can use React and Vue custom plug-ins. 一个富文本实时协同编辑器框架,可以使用React和Vue自定义插件。
Stars: ✭ 542 (+204.49%)
Mutual labels:  wysiwyg, text-editor
Graphviz Visual Editor
A web application for interactive visual editing of Graphviz graphs described in the DOT language.
Stars: ✭ 261 (+46.63%)
Mutual labels:  text-editor, wysiwyg
Ui Tinymce
AngularUI wrapper for TinyMCE
Stars: ✭ 499 (+180.34%)
Mutual labels:  text-editor, wysiwyg
Wysiwyg.js
wysiwyg contenteditable editor (minified+compression: 6kb)
Stars: ✭ 520 (+192.13%)
Mutual labels:  text-editor, wysiwyg
Yawysiwygee
Yet another what-you-see-is-what-you-get equation editor
Stars: ✭ 60 (-66.29%)
Mutual labels:  text-editor, wysiwyg
Remirror
ProseMirror toolkit for React 🎉
Stars: ✭ 973 (+446.63%)
Mutual labels:  text-editor, wysiwyg
Pell
📝 the simplest and smallest WYSIWYG text editor for web, with no dependencies
Stars: ✭ 11,653 (+6446.63%)
Mutual labels:  text-editor, wysiwyg
Ngx Currency
📦 Currency mask module for Angular
Stars: ✭ 161 (-9.55%)
Mutual labels:  angular2
Ngx Daterangepicker Material
Pure Angular 2+ date range picker with material design theme, a demo here:
Stars: ✭ 169 (-5.06%)
Mutual labels:  angular2
Angular Development With Primeng
Code samples from the book "Angular UI Development with PrimeNG"
Stars: ✭ 159 (-10.67%)
Mutual labels:  angular2
Ngx Gauge
A highly customizable Gauge component for Angular 9+ apps and dashboards
Stars: ✭ 158 (-11.24%)
Mutual labels:  angular2
Angular Truffle Starter Dapp
Angular CLI + Truffle Starter Dapp; write, compile & deploy smart contracts on Ethereum blockchains
Stars: ✭ 174 (-2.25%)
Mutual labels:  angular2
1backend
Run your web apps easily with a complete platform that you can install on any server. Build composable microservices and lambdas.
Stars: ✭ 2,024 (+1037.08%)
Mutual labels:  angular2
Vue Trix
Trix text editor component for Vue.js
Stars: ✭ 159 (-10.67%)
Mutual labels:  text-editor

ngx-wig

Build Status

screen shot 2017-12-12 at 14 52 51

Dependencies

it's only Angular! No jQuery or other WYSIWYG monsters

Angular Support

For Angular 11 [email protected] For Angular 10 [email protected] For Angular 9 [email protected] Since Angular 8 we sync the version and now for each AngularX you will be able to use ngx-wig version X. For Angular 7 [email protected] For Angular 6 [email protected]
For Angular 4 and Angular = ^5 - use version [email protected]

Icons

Icons are not in the pack! You can use the icons that you like. We recommend to use Material Design Icons

Installation

ngx-wig could be simply installed via npm:

npm install ngx-wig --save

Important note:

The last version on ngx-wig that was built for Angular 4.x is 0.3.6. Any higher version may be not fully compatible with Angular version lower than 5.0.0.

Usage

First, import the ngx-wig to your module:

import {NgxWigModule} from 'ngx-wig';

@NgModule({
  imports: [ NgxWigModule ]
});

it's just attribute directive for textarea:

<link href="https://cdn.materialdesignicons.com/2.1.19/css/materialdesignicons.min.css" rel="stylesheet" />
...
<ngx-wig [content]="text1"></ngx-wig>

Examples

Quick start ( demo )

<ngx-wig [content]="text1"></ngx-wig>

Placeholder ( demo )

<ngx-wig  [content]="text1" [placeholder]="'Enter instructions here.'"></ngx-wig>

ngModel sync ( demo )

<ngx-wig [(ngModel)]="text1"></ngx-wig>
<ngx-wig [(ngModel)]="text1"></ngx-wig>

Set buttons ( demo )

<ngx-wig  [content]="text1" [buttons]="'bold, italic'"></ngx-wig>

onContentChange Hook ( demo )

<ngx-wig [content]="text1" (contentChange)="result = $event"></ngx-wig>
<div [innerHTML]="result"></div>

Reactive FormControl ( demo )

<ngx-wig  [formControl]="text1"></ngx-wig>

Two-way binding ( demo )

<ngx-wig [(ngModel)]="text1"></ngx-wig>

Adding own buttons

Please check an example here https://stackblitz.com/edit/ngx-wig-sample-plugins?file=src/app.ts

Development

To generate all *.js, *.d.ts and *.metadata.json files:

$ npm run build

To lint all *.ts files:

$ npm run lint

To run all tests:

$ npm run test

License

MIT © Stepan Suvorov

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].