Heim >Web-Frontend >js-Tutorial >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.
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
Durch das Ändern eines WYSIWYG-HTML-Editors können Sie:
Fügen Sie Funktionen hinzu, die Ihr Projekt benötigt
Erleichtern Sie Benutzern die Verwendung
Formatieren Sie auf Ihrer gesamten Website dasselbe
Jetzt wollen wir anhand eines realen Beispiels sehen, wie wir das machen können.
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:
Es wird ein neues Symbol für unseren Button erstellt
Es teilt dem Redakteur mit, was zu tun ist, wenn jemand auf die Schaltfläche klickt
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; }
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
Wenn Sie diese Editoren wechseln, beachten Sie die folgenden Tipps:
Klein anfangen: Nehmen Sie zuerst kleine Änderungen vor, bevor Sie große ausprobieren.
Verwenden Sie, was vorhanden ist: Verwenden Sie die integrierten Tools des Editors, wenn Sie können.
Viel testen: Stellen Sie sicher, dass Ihre Änderungen in verschiedenen Browsern funktionieren.
Denken Sie an Geschwindigkeit: Große Änderungen können die Dinge verlangsamen, also testen Sie mit viel Inhalt.
Bleiben Sie auf dem Laufenden: Suchen Sie nach neuen Funktionen, die Ihnen helfen könnten.
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.
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!