Lassen Sie WYSIWYG-HTML-Editoren für sich arbeiten

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 Anpassung 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 dasselbe

Jetzt wollen wir anhand eines realen Beispiels sehen, wie wir das machen 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:

<link href="https://cdn.jsdelivr.net/npm/froala-editor@latest/css/froala_editor.pkgd.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/froala-editor@latest/js/froala_editor.pkgd.min.js"></script>

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('<span class="custom-highlight">' + this.selection.text() + '</span>');
  }
});

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

Dieser Code macht ein paar Dinge:

1. Es wird ein neues Symbol für unseren Button erstellt

2. Es teilt dem Redakteur mit, 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

• Dadurch bewegt sich die Symbolleiste mit der Seite

• Es verwendet ein vorgefertigtes Thema

Tipps zum Ändern von WYSIWYG-HTML-Editoren

Wenn Sie diese Editoren wechseln, beachten Sie 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. Viel testen: 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. Bleiben Sie auf dem Laufenden: 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('<span class="custom-highlight">' + this.selection.text() + '</span>');
        }
      });
    }
  }, []);

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

  return <FroalaEditor tag='textarea' config={config} ref={editorRef} />;
};

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 großartigen 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.

Das obige ist der detaillierte Inhalt vonLassen Sie WYSIWYG-HTML-Editoren für sich arbeiten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!