web-dev-qa-db-fra.com

Éditeur HTML pour Angular7

Je recherche un éditeur HTML à intégrer dans un projet Angular7. L'utilisateur de l'éditeur créera des pages Web très simples ou apportera de petites modifications à des pages plus complexes. Je pensais à l'origine qu'un éditeur WYSISYG pourrait faire l'affaire, mais je découvre qu'ils ne sont pas parfaits pour apporter des modifications au code HTML source. Quelqu'un a-t-il des recommandations?

Voici une liste de ce que j'ai envisagé jusqu'à présent:

  1. CKEditor5 - Vraiment un éditeur de texte riche. N'offre pas la possibilité de visualiser/modifier le code HTML source.
  2. CKEditor4 - Offre la possibilité d'éditer le code HTML source mais ne semble pas bon pour éditer des pages Web.
  3. Froala - Ça a l'air vraiment bien, mais ce n'est pas open source.
  4. Summernote (et un TypeScript port) - Celui-ci semble être parfait. Je n'ai pas pu trouver de documentation pour le configurer dans Angular cependant et la bibliothèque TypeScript n'a pas de documentation. Si quelqu'un a de l'expérience dans la configuration, une explication serait géniale!
  5. AngularEditor - J'ai actuellement celui-ci configuré et je travaille dans mon projet. Cela semble correct pour l'édition de pages Web. Mon plus gros problème est que le code HTML que j'ai inséré dans l'éditeur ne reste pas dans l'éditeur lors du rendu. Les styles quittent la fenêtre de l'éditeur et les autres éléments de la page principale sont modifiés.

Des suggestions que j'ai pu ignorer?

angulartypescriptsummernotehtml-editor
9
Tw1sm

Ne cherchez plus - je peux vraiment recommander CodeMirror :)

C'est un éditeur de texte JS très puissant mais léger qui peut être incorporé dans votre page html et possède un tas de fonctionnalités telles que ..

  • prise en charge de plus de 100 langues
  • coloration syntaxique/balisage
  • liaisons clavier (vim, emacs, sublime)
  • interface de recherche/remplacement
  • correspondance des balises
  • ..

..et il prend également en charge le balisage HTML

ma fonctionnalité préférée est la prise en charge de la saisie semi-automatique - comme dans votre IDE vous pouvez utiliser ctrl-espace pour la saisie semi-automatique. Vous pouvez essayez cette fonction ici avec l'exemple HTML

avertissement: je ne contribue pas au projet, mais je l'ai moi-même utilisé dans certains projets et je me considérerais comme un fanboy.

4
lolcatzftw

c'est la meilleure façon d'implémenter l'éditeur de texte avec angular facile, simple et parfait, ça marche pour moi si quelqu'un a besoin de suivre ces lignes de code

 npm install @syncfusion/ej2-angular-richtexteditor --save

la deuxième étape inclut la bibliothèque ci-dessus dans app.module.ts comme ceci

 import { RichTextEditorAllModule } from '@syncfusion/ej2-angular-richtexteditor';

  @NgModule({
  declarations: [
  AppComponent
 ],
 imports: [
 RichTextEditorAllModule
 ],
 bootstrap: [AppComponent]
 })
 export class AppModule { }

puis dans la page de vue des composants, utilisez cette ligne

<ejs-richtexteditor></ejs-richtexteditor>

c'est le résultat de la bibliothèque de l'éditeur de texte ci-dessus enter image description here

3
abubakkar tahir

Jetez un œil à PrimeNG et à son éditeur, basé sur Quill Editor.

https://www.primefaces.org/primeng/#/editor

2
jalex19

J'utilise @ kolkov/angular-editor @ 0.18.7.

Pour résoudre les problèmes avec les caractères spéciaux, j'ai créé une fonction de remplacement avant d'envoyer le contenu de l'API CRUD Rest.

Extrait de code :

    unentityLtGt(html){
    html = this.replaceAll(html,'&lt;','<');
    html = this.replaceAll(html,'&gt;','>');
    html = this.replaceAll(html,'"&quot;','"');
    html = this.replaceAll(html,'&quot;"','"');
    html = this.replaceAll(html,'&#34;','"');
    return html;
}
1
Daniel Krug