Custom Fonts

Custom Fonts-Plugin für Grapesjs

Dieser Code ist Teil eines größeren Projekts: über Silex v3

Über dieses Plugin

Links

• DEMO auf Codepen
• NPM-Paket
• Diskussion über laufende Entwicklungen

Das Plugin verfügt derzeit über diese Funktionen

• API zum Hinzufügen / Entfernen von Schriftarten auf der Seite (vom Goole-Schriftnamen)
• Aktualisiert das DOM und das Dropdown-Menü "Schriftartfamilie"
• Speichere die Schriftarten mit den Seitendaten
• Lade die Schriftarten, wenn die Site-Daten geladen werden (beim Laden zum DOM hinzufügen).
• Benutzeroberfläche zur Verwaltung von Schriftarten
• Integration mit Google API
• Speichern Sie die Google-Schriftenliste im lokalen Speicher für Leistung und API-Quoten

Einschränkungen:

Derzeit unterstützt dieses Plugin nur Goolge-Schriftarten und verwendet die V2-API. Es sollte auf V3 aufgerüstet werden und variable Schriftarten nutzen.

Siehe unten den Abschnitt "Entwicklung" zum Beitrag

Beweggründe

Ich habe Diskussionen und Probleme gesehen wie: "Wie kann ich benutzerdefinierte Schriftarten im grapesjs-Editor hinzufügen? #4563"

Was für mich zu funktionieren scheint, ist

1. Aktualisieren Sie das Dropdown-Menü "Schriftartfamilie"

   const styleManager = editor.StyleManager
   const fontProperty = styleManager.getProperty('typography', 'font-family')
   fontProperty.setOptions(fonts)
   styleManager.render()
   

    

2. Aktualisieren Sie das DOM, um die Schriftart korrekt anzuzeigen: Fügen Sie dem Editor Stilelemente hinzu. Canvas.getDocument()

Das ist ziemlich einfach, aber hier sind die Dinge, die mir Zeit gekostet haben, als ich Google Fonts implementiert habe.

• Verwenden Sie die Google Fonts API, um Schriftarten auszuwählen und deren Namen, Varianten und Gewichte zu erhalten
• Erstelle die URL der Schriftarten zum Laden
• die Benutzeroberfläche zur Verwaltung und Installation von Schriftarten