it-swarm.com.de

Wysiwyg-Editor für eckige 4

Kennt jemand einen guten kostenlosen Wysiwyg-Editor, der mit angular 4 kompatibel ist?

Froala scheint gut zu sein, ist aber leider nicht kostenlos.

Vielleicht war die Verwendung von angular 4 keine gute Idee, da es schwierig ist, viele grundlegende Dinge zu finden ...

Vielen Dank

35
error

Da ich das gleiche Problem hatte, teile ich die Ergebnisse meiner Forschung hier:

ng2-ckeditor

demo hier

enter image description here

ngx-editor

demo hier

EDIT 2019/01/12 - DIESES PROJEKT IS NICHT AKTIV MEHR GEWARTET

enter image description here

quill.js für eckig

demo hier

Hinweis: Quill verwendet JSON, um die Daten intern und nicht in HTML zu speichern.

enter image description here

PRIME NG

Themensammlung, die auch einen Quill-basierten WYSIWYG-Editor enthält, Demo hier . Einige der Themen sind kostenlos.

ngx-md

Ein WYSIWYG-Editor, der MarkDown anstelle von HTML verwendet, Demo hier

Bearbeiten

Wenn Sie sich für quill.js entschieden haben, können Sie KillerCodeMonkeys Implementierung verwenden, da es mit angular 5 kompatibel ist.

44
Ronin

Probieren Sie diesen einfachen, aber leistungsstarken WYSIWYG-Editor für Andular 6+ (native) aus.

AngularEditor

Hinweis: Dieser native Angular 6+ WYSIWYG-Editor wurde mit Angular CLI v6.0.5 als Bibliothek erstellt.

![AngularEditor

Demo ist hier

PR oder neue Features sind erwünscht.

Dieser Editor wurde ursprünglich als Teil meines Unternehmensprojekts erstellt https://kassar.ru/ , aber ich habe ihn in eine separate Bibliothek extrahiert und als Open Source-Projekt veröffentlicht. Ich hoffe, das hilft jemandem, ihre Probleme zu lösen.

23
Andrey K.

Vielen Dank an @ Ronin für die Weitergabe Ihrer Forschungsergebnisse. Hier ist mein Feedback zu einem Paar, das ich getestet habe.

NGX-EDITOR

Zuerst habe ich ngx-editor ausprobiert und war relativ einfach zu installieren und zu benutzen. Benötigte nur ngs-boostrap und fontAwesome als Abhängigkeiten. Der einzige Nachteil, den ich für meine Anforderungen gefunden habe, war das Hinzufügen eines Link-Widgets. Diese Bibliothek speichert den von Ihnen eingegebenen Link nicht. Wenn Sie ihn ändern möchten, müssen Sie ihn entfernen und erneut hinzufügen. Eine weitere Einschränkung war, dass man keinen Wert für die maximale Länge angeben konnte.

NGX-QUILL

Am Ende habe ich ngx-quill verwendet. Es bietet eine bessere Möglichkeit, mit Links umzugehen, sowie die Möglichkeit, die maximale Länge anzugeben. Es war auch sehr einfach zu installieren:

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

Sie können ng2-editor verwenden. Es gibt viele Optionen zu verwalten.

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

4
Aman Jain

Ich benutze " ngx-quill " als WYSIWYG-Editor in meinem Angular4-Projekt.

Dies ist eine Angular (> = 2) -Komponente für den Rich-Text-Editor Quill

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