Zum Hauptinhalt springen

Quill V2: Text Documents

Mit Quill lassen sich einfache, formatierte Texteingaben erstellen. Die Eingabe kann dabei beliebig formatiert werden. Es stehen die beiden Themes snow und bubble zur Verfügung.

Standardmässig wird das snow Theme verwendet.

<QuillV2 id="d20ee4cf-537a-4a21-91e3-25f5e88339ff" />
http://localhost:3000
Laden...

Wahlweise kann auch das bubble Theme verwendet werden.

<QuillV2 theme="bubble" id="c927c357-4898-4d0c-9878-df0c0100abb3"/>
http://localhost:3000
Laden...

Readonly​

<QuillV2 readonly id="c927c357-4898-4d0c-9878-df0c0100abb3"/>
http://localhost:3000
Laden...

Toolbar anpassen​

Die Toolbar kann angepasst werden, indem die gewünschten Buttons definiert werden. Die Buttons können dabei in Gruppen zusammengefasst werden.

Es sind folgende Optionen verfügbar:

  • bold
  • italic
  • underline
  • h1
  • h2
  • h3
  • color
  • background
  • ul
  • ol
  • code
  • image
  • align

Beispiel​

Nur die Buttons für Bilder und Code werden angezeigt

<QuillV2 toolbar={{image: true, code: true}} id="ad7ae52b-e757-44b7-b48e-28de3342fc73" />
http://localhost:3000
Laden...

Toolbar ausblenden​

Standardmässig wird die Toolbar immer angezeigt. Mit dem Attribut hideToolbar kann die Toolbar permanent ausgeblendet werden.

<QuillV2 hideToolbar id="eeacafce-0f83-4f55-b349-cb73ec7da43d" />
http://localhost:3000
Laden...

Temporäres Textfeld​

Ohne id wird der Zustand nicht gespeichert, was mit einem und einem roten Rand signalisiert wird. Die Warnhinweise können mit hideWarning ausgeblendet werden.

<QuillV2 />
<QuillV2 hideWarning />
http://localhost:3000

Installation​

Code
  • src/models/documents/QuillV2
  • src/components/documents/QuillV2
Dependencies
{
  "dependencies": {
    "heic2any": "^0.0.4",
    "react-quilljs": "^2.0.4",
    "@botom/quill-resize-module": "^2.0.1"
  }
}
CC 4.0