Tutorial: Das „rich text editor“-Steuerelement auf Power Pages konfigurieren

Im Tutorial konfigurieren Sie die Rich-Text-Editor-Komponente in einem Microsoft Dataverse Formular und aktivieren den Rich-Text-Editor, damit er auf einer Webseite sichtbar ist.

In dieser Anleitung werden die Tabelle Feedback und die Webseite Kontaktieren Sie uns verwendet, die in den Vorlagen für das Starter layout verfügbar sind.

Anforderungen

  • Eine Website, die eine der Starterlayoutvorlagen verwendet.

Schritt 1. Die Codekomponente einem Feld in einem Formular hinzufügen

  1. Wählen Sie im Designstudio den Daten-Arbeitsbereich aus.

  2. Wählen Sie die Feedback-Tabelle aus.

  3. Wählen Sie Formulare aus und wählen Sie das einfache Kontaktformular aus.

  4. Wählen Sie das Feld Nachricht.

  5. Wählen Sie + Komponente und wählen Sie die Komponente Zahleneingabe aus.

    Fügen Sie dem Formular RTE-Komponenten hinzu.

  6. Wählen Sie Fertig aus.

  7. Wählen Sie Speichern und Formular veröffentlichen aus.

Schritt 2. Die Rich-Text-Editor-Komponente auf der Webseite konfigurieren

In den folgenden Schritten konfigurieren wir die vorhandene Feedback-Seite, Sie können auch Ihre eigene Seite erstellen und Ihre eigene Formularkomponente hinzufügen.

  1. Wählen Sie im Arbeitsbereich Seiten die Seite Kontaktieren Sie uns.

  2. Das Feld Nachricht sollte auf dem Formular mit der Nachricht Benutzerdefinierte Komponente aktivieren, um dieses Feld in der Vorschau anzuzeigen erscheinen.

  3. Wählen Sie das Feld aus und wählen Sie Feld bearbeiten aus.

  4. Wählen Sie das Feld Benutzerdefinierte Komponente aktivieren aus.

    Aktivieren Sie die RTE-Komponente im Designstudio.

  5. Wählen Sie OK aus.

  6. Klicken Sie auf Sync.

Anmerkung

Um die Daten als Rich-Text anzeigen zu lassen, müssen Sie möglicherweise die Zeichengröße der Textspalten erhöhen, um die zusätzlichen Informationen aufzunehmen

Schritt 3.1: Tabellenberechtigungen für die Rich-Text-Anhangstabelle hinzufügen

Um Bilder im Rich-Text-Editor des Portals verwenden und speichern zu können, müssen Sie Tabellenberechtigungen zur Rich-Text-Anhang-Tabelle (msdyn_richtextfile) hinzufügen.

  1. Öffnen Sie das Designstudio, und wählen Sie den Arbeitsbereich "Sicherheit " aus.

  2. Wählen Sie Tabellenberechtigungen aus.

  3. Wählen Sie + Neue Berechtigung aus, um eine neue Tabellenberechtigung für die Rich-Text-Anlagentabelle zu erstellen. Der Name kann beliebig gewählt werden; in diesem Beispiel verwenden wir RTE Attachment.

  4. Für Zugriffstyp, wählen Sie Globaler Zugriff aus.

    Anmerkung

    Der Typ Globaler Zugriff wird verwendet, da keine Beziehung zwischen der Tabelle, die für die Verwendung des „rich text editor“-Steuerelements konfiguriert ist, und der Rich-Text-Anlagentabelle besteht.

  5. Wählen Sie unter Erlaubnis zuLesen, Schreiben, Erstellen und Löschen aus.

  6. Weisen Sie der Tabellenberechtigung eine passende Webrolle zu.

Wichtig

Wenn Sie Bilder als Base-64-Zeichenfolge direkt in der Spalte speichern möchten, die Sie für die Verwendung des „rich text editor“-Steuerelements konfiguriert haben, müssen Sie das Steuerelement mit einer JSON-Konfigurationsdatei konfigurieren. Legen Sie disableImages und disableDefaultImageProcessing auf wahr fest, damit Bilder auf allen Clients konsistent gerendert werden können. Die Verwendung dieser Methode erfordert keine globale Tabellenberechtigung für die Rich-Text-Anhang-Tabelle (msdyn_richtextfile).

Schritt 3.2. Websiteeinstellung für die Web-API hinzufügen

Um Bild- und Dateianhänge im Steuerelement des Rich-Text-Editors zu speichern und darauf zuzugreifen, fügen Sie die folgenden Websiteeinstellungen hinzu.

  1. Öffnen Sie die Portalverwaltungs-App.

  2. Wechseln Sie zu Websiteeinstellungen.

  3. Erstellen Sie die folgenden Websiteeinstellungen. Wenn eine der beiden Siteeinstellungen für Ihre Website bereits vorhanden ist, aktualisieren Sie den bestehenden Datensatz, anstatt ein Duplikat zu erstellen. Geben Sie den Namen ein, wählen Sie Ihre Website aus, geben Sie den angegebenen Wert ein, und wählen Sie dann "Speichern und Schließen" aus.

    Website-Einstellungsname Wert
    Webapi/msdyn_richtextfile/enabled Wahr
    Webapi/msdyn_richtextfile/fields msdyn_richtextfileid,msdyn_name,msdyn_imageblob,msdyn_fileblob,msdyn_parententityname,msdyn_parententity_fieldname,msdyn_parentid,Statecode,Statuscode

Wichtig

Verwenden Sie die vollständige, für Webapi/msdyn_richtextfile/fields explizit angezeigte Spaltenliste. Die msdyn_fileblob Spalte ist erforderlich, um auf Dateianhänge zuzugreifen, obwohl es sich um eine schreibgeschützte Spalte handelt. Eine unvollständige Liste könnte dazu führen, dass Bildanhänge funktionieren, während Dateianhänge nicht funktionieren.

Schritt 4. Website-Vorschau anzeigen.

  1. Wählen Sie im Designstudio Synchronisieren aus.

  2. Wählen Sie Vorschauversion und dann Desktop aus, gehen Sie zur Seite Kontaktieren Sie uns aus. Sie sollten dann sehen, dass die benutzerdefinierte Komponente aktiviert ist.

    RTE-Komponente auf einem Formular.

Rich-Text-Editor in einem schreibgeschützten Formular

Bei einem schreibgeschützten Formular zeigt der Rich-Text-Editor den Inhalt mit Formatierungen und Bildern an. Der Inhalt kann gelesen, aber nicht bearbeitet oder aktualisiert werden.

Anmerkung

Für Drag & Drop werden nur die Dateiformate PNG, JPG oder GIF unterstützt.

Rendern des Rich-Text-Editor-Inhaltsfelds mit Liquid oder der Pages Web-API

Das Rich-Text-Editor-Inhaltsfeld kann mithilfe der Liquid- oder Seiten-Web-API gerendert werden. Wenn das Feld Bilddateien enthält, haben diese einen Dataverse-Web-API-Referenzpfad. Um diese Bilder auf einer Seiten-Webseite anzuzeigen, müssen Sie den aktuellen Pfad durch den entsprechenden Seiten-API-Pfad ersetzen.

Beispiel:

Das Bildelement im Inhaltsfeld des Rich-Text-Editors wird wie folgt angezeigt und enthält einen Verweis auf den Dataverse-Web-API-Pfad:

   <img loading="lazy" src="/api/data/v9.0/msdyn_richtextfiles(d0a473a4-9e95-ee11-be37-000d3a5c393e)/msdyn_imageblob/$value?size=full" style="height:61px; width:376px">

Um das Bildelement zu aktualisieren, ersetzen Sie /api/data/v9.0 mit /_api wie nachfolgend dargestellt:

   <img loading="lazy" src="/_api/msdyn_richtextfiles(d0a473a4-9e95-ee11-be37-000d3a5c393e)/msdyn_imageblob/$value?size=full" style="height:61px; width:376px">

Siehe auch

  • Zuletzt aktualisiert um