web-dev-qa-db-fra.com

Wysiwyg éditeur pour Angular 4

Est-ce que quelqu'un connaît un bon éditeur wysiwyg gratuit compatible avec angular 4?

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

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

Je vous remercie

angularwysiwyg
35
error

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

ng2-ckeditor

démo ici

enter image description here

ngx-editor

démo ici

EDIT 2019/01/12 - CE PROJET IS NON MAINTENU ACTUELLEMENT PLUS

enter image description here

quill.js pour angular

démo ici

Remarque: Quill utilise JSON pour stocker les données en interne, pas en HTML.

enter image description here

PRIME NG

Collection thématique, qui comporte également un éditeur WYSIWYG basé sur Quill, démo ici . Certains thèmes sont gratuits.

ngx-md

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

Modifier

Si votre choix était quill.js, vous pouvez utiliser implémentation de KillerCodeMonkey car il est compatible avec angular 5.

44
Ronin

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

AngularEditor

Remarque: cet éditeur natif Angular 6++ WYSIWYG a été créé sous forme de bibliothèque avec Angular CLI v6.0.5.

![AngularEditor

La démo est ici

Des demandes de relations publiques ou de nouvelles fonctionnalités sont les bienvenues.

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

23
Andrey K.

Merci @Ronin pour le partage de vos recherches. Voici mes commentaires sur un couple que j'ai testé.

NGX-EDITOR

J'ai d'abord essayé ngx-editor et j'étais relativement facile à installer et à utiliser. Ngs-boostrap et fontAwesome ne sont nécessaires que comme dépendances. Cependant, le seul inconvénient que j'ai trouvé pour mes besoins était l'ajout d'un widget Lien. Cette bibliothèque ne se souvient pas du lien que vous avez entré. Par conséquent, si vous souhaitez les modifier, vous devez les supprimer et les rajouter. Une autre limitation était qu'il était impossible de spécifier une valeur de longueur maximale.

NGX-QUILL

J'ai fini par utiliser ngx-quill . Il offre un meilleur moyen de gérer les liens et de spécifier la longueur maximale. C'était aussi très facile à installer:

npm install ngx-quill
npm install quill  // Needed for CSS styles

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

@NgModule({
  imports: [
    ...,

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

Vous pouvez utiliser ng2-editor. Il a beaucoup d'options à gérer.

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

4
Aman Jain

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

Ceci est 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
2
Fibi