rich text editor

Bevorstehende Warnung zur Veränderung

Am 18.10. Wir werden eine neue Major-Version (V8) des Rich Texteditors veröffentlichen, die ein Umschreiber der alten Codebasis ist. Diese Warnung ist für Benutzer von NPM-Paketen mithilfe von Versioning nicht von entscheidender Bedeutung, sondern für Benutzer des UNPKG-Bundle (http://unpkg.com/rich-text-editor/dist/rich-text-editor-bundle.js) bemerken, dass das neueste Bündel des Code nicht mehr wie erwartet funktioniert. Um eine brechende Änderung in Ihrem System zu vermeiden, können Sie die Version des UNPKG-Pakets wie folgt auf die letzte stabile Version von V7 festlegen: http://unpkg.com/[email protected]/dist/rich-text-editor-ditor-bundle.js

Auf diese Weise gibt es Ihnen Zeit, Ihre Systeme zu entwickeln, die nach Veröffentlichung der neuen Version für die neue Version berücksichtigt werden.

Abitti.net

Verwendung von Abitti -Markenpolitik

Reicher Texteditor mit mathematischer Unterstützung für finnische Immatrikulationsprüfungsausschütze. Live-Demo finden Sie unter https://math-demo.abitti.fi/

Da v4.0.0, werden nur der ES2017 -Code mit ES -Modulen bereitgestellt (im dist -Verzeichnis). Wenn Sie diese Bibliothek verwenden möchten, ist wahrscheinlich ein Bundler wie Webpack oder Rollup erforderlich.

Verwendung

Verwendung mit NPM

Installieren Sie das Paket mit npm install rich-text-editor . Rich Texteditor kann entweder als verwendet werden als

• Ein React-Komponenten import RichTextEditor from 'rich-text-editor'
• oder als Funktion in Apps, die React import { makeRichText } from 'rich-text-editor/dist/rich-text-editor'

Die meisten Eigenschaften, die an die Komponente oder die Initialisierungsfunktion übergeben wurden, werden nachstehend beschrieben. Weitere Informationen finden Sie in den Typen und/oder im Quellcode.

Verwendung als CDN -Bündel

Fügen Sie Ihrer HTML-Seite ein Skript-Tag hinzu <script type="module" src="https://unpkg.com/rich-text-editor/dist/rich-text-editor-bundle.js"></script> dessen Quelle https://unpkg.com/rich-text-editor/dist/rich-text-editor-bundle.js , z.

Dadurch wird makeRichText zum Fenster hinzugefügt, mit dem der Editor initialisiert werden kann.

Die Funktion nimmt die folgenden Parameter als Objekt an:

Schlüssel	Standard
Container	document.getElementById ('Rich-text-Editor-Root')
Sprache	'Fi'
BasisaRl	'' '
erlaubte filetypen	['Bild/PNG', 'Image/JPEG']
Onvaluechange	() => {}
TextAreafrops	{}

Beispiel:

 {
  container: document.getElementById('rich-text-editor-root')!,
  language: 'FI',
  baseUrl: '',
  allowedFileTypes: ['image/png', 'image/jpeg'],
  onValueChange: () => {},
  textAreaProps: {},
}

TextAreAProps werden an das zugrunde liegende Div -Element übergeben, das das sichtbare Editorelement ist. Hier sind diejenigen, die für die Konfiguration von CDN -Benutzern relevant sind:

Schlüssel	Typ	Zweck
Ariainvalid	boolean	Fügen Sie Aria-Invalid hinzu
Arialabelledby	Saite	Fügen Sie Aria-markiert hinzu
Editorstyle	React.csSproperties	Direkte CSS -Eigenschaften auf das Editorelement
Klassenname	Saite	Zusätzliche Klassenname (n) zum Editorelement
Ausweis	Saite	ID-Feld zum Editorelement
Lang	Saite	Lang-Feld zum Redakteur-Element für Barrierefreiheit

Ziel (lesen Sie dies vor der Einreichung)

Rich Texteditor wurde entwickelt, damit die Kandidaten der finnischen Matrizierungsprüfung Screenshots anhängen und Gleichungen im Rahmen ihrer Einreichungen schreiben können. Unser Ziel ist es nicht, einen allgemeinen Drop-In-Ersatz für TextArea zu erstellen, sondern einen Redakteur, der in Abitti und seinem eingebetteten Browser arbeitet.

Während wir jeden Fehlerbericht feiern, fordern wir die Anfrage an und ziehen Sie die Anfrage an, wir bitten Sie bitte, sich an die folgenden zu erinnern:

• Die meisten Probleme im Zusammenhang mit dem Eintritt in Formeln und Rendern von Latex werden durch Mathjax- und Mathquill -Bibliotheken verursacht. Wir haben keine Ressourcen, um Pull -Anfragen auf der Grundlage von Problemen zu schreiben, die uns übermittelt wurden. Aus ähnlichen Gründen werden wir nicht die an uns gemeldeten Probleme der gegen die Streams bestehende Probleme geben.
• Wir achten nicht auf Probleme oder ziehen Anfragen, die außerhalb unserer Mission fallen - Abitti.

Wir hoffen, dass Sie unseren Wunsch verstehen, sich auf unser gesetzes Ziel festzulegen.

Abhängigkeiten

• Mathquill (https://github.com/digabi/mathquill)
• Mathjax-Node
• JQuery
• Sanitize-html

Erste Schritte

1. Installieren Sie node.js
2. Führen Sie npm install aus.
3. Run npm run dev .
4. Browser -Tests: http: // localhost: 5111/test/tests.html
5. Manuelles Test: http: // localhost: 5111/test/tests.html? Grep = Handbuch

Testen Sie das Bundle lokal

1. Führen Sie npm run build
2. Führen Sie npm run dev-server
3. Führen Sie einen einfachen HTTP -Server im Projektroot aus, zum Beispiel python3 -m http.server 8080
4. Bearbeiten Sie dev/index.html Skript-Tag, um auf das Bundle zu verweisen: <script type="module" src="/dist/rich-text-editor-bundle.js"></script> (begehen Sie dies nicht).
5. Gehen Sie zu http: // localhost: 8080/dev/index.html

Beispiel für die direkte Verwendung

Demo: http://digabi.github.io/rich-text-editor/

Quelle: https://github.com/digabi/rich-text-editor/blob/master/index.html

Lizenz

https://opensource.org/licenses/mit