Éditeur wysiwyg pour angular4

Question

Est-ce que quelqu'un sait si il y a un bon éditeur wysiwyg gratuit compatible avec angular 4 ?

Froala semble être bon mais malheureusement il n'est pas gratuit.

Peut-être que l'utilisation d'angular 4 n'était pas une bonne idée car il est difficile de trouver beaucoup de choses de base ...

Merci

Answer 1

Étant donné que j'ai eu le même problème, je partage les résultats de mes recherches ici :

ng2-ckeditor

démonstration ici

ngx-editor

démonstration ici

quill.js pour Angular

démonstration ici

Note : Quill utilise JSON pour stocker les données en interne, pas html.

PRIME NG

Collection de thèmes, qui propose également un éditeur WYSIWYG basé sur Quill, démonstration ici. Certains thèmes sont gratuits.

ngx-md

Un éditeur WYSIWYG qui utilise MarkDown plutôt que HTML, démonstration ici

Éditer

Si vous avez choisi quill.js, vous voudrez peut-être utiliser l'implémentation de KillerCodeMonkey car elle est compatible avec Angular 5.

Answer 2

Essayez cet éditeur WYSIWYG simple mais puissant pour Andular 6-12 (natif)

AngularEditor

Note : Cet éditeur WYSIWYG natif Angular 6+ a été créé en tant que bibliothèque.

[

La démo se trouve ici

Les demandes de PR ou de nouvelles fonctionnalités sont les bienvenues.

Cet éditeur a été initialement créé dans le cadre de mon projet d'entreprise https://online.freicon.ru/, mais je l'ai extrait en tant que bibliothèque distincte et l'ai publié en tant que projet open source. J'espère que cela aidera quelqu'un à résoudre ses problèmes.

Answer 3

Merci @Ronin d'avoir partagé vos recherches. Voici mes commentaires sur quelques-uns que j'ai testés.

NGX-EDITOR

Tout d'abord, j'ai essayé ngx-editor et il était relativement facile à installer et à utiliser. J'avais seulement besoin de ngs-bootstrap et fontAwesome comme dépendances. Cependant, le seul inconvénient que j'ai trouvé pour mes besoins était le widget d'ajout de lien. Cette bibliothèque ne se souvient pas du lien que vous avez saisi, donc si vous voulez le modifier, vous devez le supprimer et le réajouter. Une autre limitation était que l'on ne pouvait pas spécifier de valeur maximale de longueur.

NGX-QUILL

J'ai fini par utiliser ngx-quill. Il offre une meilleure façon de gérer les liens ainsi que la possibilité de spécifier une longueur maximale. Il était également très facile à installer :

npm install ngx-quill
npm install quill  // Nécessaire pour les styles CSS

import { QuillModule } from 'ngx-quill'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'

@NgModule({
  imports: [
    ...,

    QuillModule
  ],
  ...
})
class YourModule { ... }

Answer 4

Vous pouvez utiliser ng2-editor. Il dispose de nombreuses options pour gérer .

https://github.com/chymz/ng2-ckeditor

Answer 5

J'utilise "ngx-quill" comme éditeur WYSIWYG dans mon projet Angular4.

Il s'agit d'un composant Angular (>=2) pour l'éditeur de texte enrichi Quill

angular v4 - ngx-quill <=1.6.0
angular v5 - ngx-quill > 1.6.0
angular v6 - ngx-quill >= 3.0.0

• page de démo
  image de la barre d'outils