Verwenden Sie in Ihren Projekten WYSIWYG-HTML-Editoren? Diese benutzerfreundlichen Tools erfreuen sich bei Webentwicklern und Inhaltserstellern immer größerer Beliebtheit und bieten eine intuitive Benutzeroberfläche zum Erstellen von Webinhalten, ohne sich mit rohem HTML-Code auseinanderzusetzen. Obwohl diese Editoren sofort leistungsstark sind, wird ihr wahres Potenzial oft durch individuelle Anpassungen freigesetzt.

Wichtige Erkenntnisse

• Sie können neue Funktionen zu WYSIWYG-HTML-Editoren hinzufügen

• Benutzerdefinierte Schaltflächen helfen Benutzern, Inhalte einfach zu formatieren

• Das Ändern des Aussehens des Editors kann zum Stil Ihrer Website passen

Warum WYSIWYG-HTML-Editoren ändern?

Durch das Ändern eines WYSIWYG-HTML-Editors können Sie:

1. Fügen Sie Funktionen hinzu, die Ihr Projekt benötigt

2. Erleichtern Sie Benutzern die Verwendung

3. Formatieren Sie auf Ihrer gesamten Website gleich

Lassen Sie uns nun anhand eines realen Beispiels sehen, wie wir dies tun können.

Hinzufügen einer praktischen Hervorhebungsschaltfläche

Oft möchten wir einen Text hervorheben. Fügen wir eine Schaltfläche hinzu, die dies schnell erledigt. Zuerst müssen wir den Editor zu unserer Seite hinzufügen:

Dann können wir unsere neue Schaltfläche hinzufügen:

// Make a new icon
FroalaEditor.DefineIcon('highlight', {NAME: 'star'});

// Create a new button
FroalaEditor.RegisterCommand('highlight', {
  title: 'Highlight',
  icon: 'highlight',
  focus: true,
  undo: true,
  refreshAfterCallback: true,
  callback: function () {
    this.html.insert(''   this.selection.text()   '');
  }
});

// Start the editor with our new button
new FroalaEditor('#editor', {
  toolbarButtons: ['bold', 'italic', 'underline', '|', 'highlight']
});

Dieser Code macht ein paar Dinge:

1. Es erstellt ein neues Symbol für unsere Schaltfläche

2. Es sagt dem Redakteur, was zu tun ist, wenn jemand auf die Schaltfläche klickt

3. Es fügt unsere neue Schaltfläche zur Symbolleiste hinzu

Damit der hervorgehobene Text gut aussieht, fügen wir einen Stil hinzu:

.fr-view .custom-highlight {
  background-color: yellow;
  padding: 2px;
  border-radius: 2px;
}

Den Editor gut aussehen lassen

Sie können auch das Aussehen des Editors ändern. Hier ist eine einfache Möglichkeit, dies zu tun:

new FroalaEditor('#editor', {
  toolbarButtons: ['bold', 'italic', 'underline', '|', 'highlight'],
  toolbarButtonsSM: ['bold', 'italic', 'underline', '-', 'highlight'],
  placeholderText: 'Type here...',
  charCounterCount: false,
  toolbarSticky: false,
  theme: 'royal'
});

Diese Änderung bewirkt mehrere Dinge:

• Es richtet Schaltflächen für verschiedene Bildschirmgrößen ein

• Es fügt Text hinzu, um anzuzeigen, wo eingegeben werden muss

• Der Zeichenzähler wird ausgeschaltet

• Die Symbolleiste bewegt sich mit der Seite

• Es verwendet ein vorgefertigtes Thema

Tipps zum Wechseln von WYSIWYG-HTML-Editoren

Beachten Sie beim Wechseln dieser Editoren die folgenden Tipps:

1. Klein anfangen: Nehmen Sie zuerst kleine Änderungen vor, bevor Sie große ausprobieren.

2. Verwenden Sie, was vorhanden ist: Verwenden Sie die integrierten Tools des Editors, wenn Sie können.

3. Testen Sie viel: Stellen Sie sicher, dass Ihre Änderungen in verschiedenen Browsern funktionieren.

4. Denken Sie an Geschwindigkeit: Große Änderungen können die Dinge verlangsamen, also testen Sie mit viel Inhalt.

5. Auf dem Laufenden bleiben: Suchen Sie nach neuen Funktionen, die Ihnen helfen könnten.

Verwendung geänderter Editoren in verschiedenen Frameworks

Sie können diese geänderten Editoren in vielen Web-Frameworks verwenden. So können Sie unseren geänderten Editor in React verwenden:

import React, { useEffect, useRef } from 'react';
import FroalaEditor from 'react-froala-wysiwyg';

const MyEditor = () => {
  const editorRef = useRef(null);

  useEffect(() => {
    if (editorRef.current) {
      FroalaEditor.DefineIcon('highlight', {NAME: 'star'});
      FroalaEditor.RegisterCommand('highlight', {
        title: 'Highlight',
        icon: 'highlight',
        focus: true,
        undo: true,
        refreshAfterCallback: true,
        callback: function () {
          this.html.insert(''   this.selection.text()   '');
        }
      });
    }
  }, []);

  const config = {
    toolbarButtons: ['bold', 'italic', 'underline', '|', 'highlight'],
    placeholderText: 'Type here...'
  };

  return ;
};

export default MyEditor;

Diese React-Komponente umschließt unseren geänderten Editor und erleichtert die Verwendung in Ihrer React-App.

Zusammenfassung

WYSIWYG-HTML-Editoren sind großartige Werkzeuge zum Erstellen von Inhalten. Darüber hinaus werden sie noch besser, wenn Sie sie an Ihre Bedürfnisse anpassen. Indem Sie neue Schaltflächen hinzufügen, ihr Aussehen ändern und sie in Ihr Projekt integrieren, können Sie ein perfektes Bearbeitungswerkzeug erstellen.

Denken Sie daran, dass das Ziel darin besteht, dass der Editor genau zu Ihnen passt. Mit ein paar cleveren Änderungen können Sie einen guten Editor in einen tollen Editor verwandeln, der sich nahtlos in Ihre Arbeit einfügt.

Also probieren Sie es einfach aus! Ändern Sie Ihren WYSIWYG-HTML-Editor und sehen Sie, wie viel besser er für Ihre Benutzer sein kann.

Dieser Beitrag wurde ursprünglich auf Froalas Blog veröffentlicht.