React Komponenten und Scrivito Widgets

Wie aus einer React Komponente ein editierbares Scrivito Widget wird.

Auf Github stehen unzählige React-Komponenten zur Verfügung. Die Nutzung ist für Entwickler gedacht. Aber was ist, wenn Endbenutzer diese einsetzen und den Inhalt einer Komponente einfach editieren möchten? Hier kommt das Scrivito CMS ins Spiel. Scrivito macht es Entwicklern sehr einfach, eine React-Komponente in einem Scrivito-Widget zu benutzen. Endbenutzer können das Widget dann, wie gewohnt, an beliebigen Stellen hinzufügen und editieren.

Hier der Code, aus drei Dateien die ein Widget benötigt. Das Widget stellt Code Highlighting zur Verfügung.

//CodeWidgetClass.js
import * as Scrivito from 'scrivito';
import { registerTextExtract } from '../../utils/textExtractRegistry';

const CodeWidget = Scrivito.provideWidgetClass('CodeWidget', {
    attributes: {
        text: 'html',
    },
});

registerTextExtract('CodeWidget', [
    { attribute: 'text', type: 'html' },
]);

export default CodeWidget;

//CodeWidgetEditingContent.js
import * as Scrivito from 'scrivito';
import textWidgetIcon from '../../assets/images/text_widget.svg';

Scrivito.provideEditingConfig('CodeWidget', {
    title: 'Code',
    thumbnail: textWidgetIcon,
    attributes: {
        text: {
            title: 'Code',

        }
    },
    properties: [
        'text'
    ],

});

//CodeWidgetComponent.js - Hier wird die React-Komponente importiert und im Scrivito Widget aufgerufen
import * as React from 'react';
import * as Scrivito from 'scrivito';
import Highlight from 'react-highlight';
import InPlaceEditingPlaceholder from '../../Components/InPlaceEditingPlaceholder';

Scrivito.provideComponent('CodeWidget', ({ widget }) => {
const code = widget.get('text')
  
if (!code.length) {
    return (
      <InPlaceEditingPlaceholder center={ true }>
        Select blocks in the widget properties.
      </InPlaceEditingPlaceholder>
    );
  }

  return (
    <div>
    <Highlight className='javascript'>
     {code}
    </Highlight>
    </div>
  );
});

In vielen Fällen können existierende Widgets einfach dupliziert werden. In meinem Code Widget diente das Text Widget als Grundlage. In den zwei ersten Dateien müssen eigentlich nur Bezeichner geändert werden. Aus TextWidget wird CodeWidget. Und in der Datei, die für das Rendern zuständig ist, wird die React-Komponente importiert und aufgerufen.

Alles sehr einfach und schnell umzusetzen. Stateful React Components sind ein klein wenig komplizierter. Hier beschreibe ich deren Entwicklung.

Kommentare

Melde dich bitte an, wenn du einen Kommentar schreiben möchtest.
Es wurden noch keine Kommentare erstellt. Sei Erste(r).