Wenn Sie Ihre React-App mit einem leistungsstarken, anpassbaren RichText-Editor erweitern m?chten, ist TipTap eine ausgezeichnete Wahl. Dieses Tutorial führt Sie durch die Integration von TipTap in Ihr Projekt und das Hinzufügen einer Erw?hnungsfunktion für ein dynamisches Benutzererlebnis.

Was Sie bauen werden

Am Ende dieses Tutorials werden Sie Folgendes haben:

1. Ein voll funktionsf?higer RichText-Editor, der mit TipTap erstellt wurde.
2. Unterstützung für durch @ ausgel?ste Erw?hnungen, komplett mit dynamischen Vorschlagslisten.
3. Einblick in die L?sung von Grenzf?llen wie Platzhaltersichtbarkeit und Cursorerhaltung.

Weitere Informationen zu TipTap finden Sie in der offiziellen Dokumentation oder im GitHub-Repository.

Schritt 1: Abh?ngigkeiten installieren
Installieren Sie vor dem Eintauchen die erforderlichen Bibliotheken:

npm install @tiptap/react @tiptap/starter-kit @tiptap/extension-mention

Schritt 2: Erstellen Sie einen einfachen RichText-Editor

Beginnen Sie mit der Erstellung einer RichTextEditor-Komponente. Hier ist eine einfache Implementierung:

import { useEditor, EditorContent } from '@tiptap/react';  

import StarterKit from '@tiptap/starter-kit';  

export const RichTextEditor = ({ content, onChange }) => {  
  const editor = useEditor({  
    extensions: [StarterKit],  
    content: content,  
    onUpdate: ({ editor }) => {  
      onChange(editor.getHTML());  
    },  
  });  
  return <EditorContent editor={editor} />;  
};

Schritt 3: Erw?hnungen hinzufügen

Erw?hnungen verbessern die Benutzerinteraktivit?t, insbesondere im Chat oder in kollaborativen Anwendungen. Um sie umzusetzen:

1. Installieren und konfigurieren Sie die Mention-Erweiterung

?ndern Sie die RichTextEditor-Komponente so, dass sie die Mention-Erweiterung enth?lt:

import Mention from '@tiptap/extension-mention';  

export const RichTextEditor = ({ content, onChange, mentions }) => {  
  const editor = useEditor({  
    extensions: [  
      StarterKit,  
      Mention.configure({  
        HTMLAttributes: { class: 'mention' },  
        suggestion: {  
          items: ({ query }) =>  
            mentions.filter(item => item.display.toLowerCase().includes(query.toLowerCase())).slice(0, 5),  
          render: () => {  
            let component;  
            let popup;  
            return {  
              onStart: (props) => {  
                popup = document.createElement('div');  
                popup.className = 'mention-popup';  
                document.body.appendChild(popup);  
                component = {  
                  updateProps: () => {  
                    popup.innerHTML = `  
                      <div>



<h3>
  
  
  Step 4: Style the Mentions Popup
</h3>

<p>Mentions should be visually distinct. Add the following styles to enhance usability:<br>
</p>

<pre class="brush:php;toolbar:false">.mention-popup {  
  background: white;  
  border-radius: 8px;  
  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);  
  padding: 8px;  
  position: absolute;  
  z-index: 1000;  
}  
.mention-popup .items {  
  display: flex;  
  flex-direction: column;  
}  
.mention-popup .item {  
  padding: 8px;  
  cursor: pointer;  
  border-radius: 4px;  
}  

.mention-popup .item:hover,  
.mention-popup .item.is-selected {  
  background: #f0f0f0;  
}

Schritt 5: Randf?lle, mit denen ich w?hrend der Implementierung konfrontiert war

1. Cursorspringen: Um ein Springen des Cursors w?hrend der Eingabe zu vermeiden, stellen Sie sicher, dass bei Inhaltsaktualisierungen die Position des Cursors erhalten bleibt:

const editor = useEditor({  
  extensions: [StarterKit],  
  content,  
  onUpdate: ({ editor }) => {  
    const selection = editor.state.selection;  
    onChange(editor.getHTML());  
    editor.commands.setTextSelection(selection);  
  },  
});

1. Platzhalter nicht sichtbar:

Verwenden Sie die Platzhaltererweiterung, um einen Hinweis anzuzeigen, wenn der Editor leer ist:

import Placeholder from '@tiptap/extension-placeholder';  
const editor = useEditor({  
  extensions: [  
    StarterKit,  
    Placeholder.configure({ placeholder: 'Type something...' }),  
  ],  
});

1. Erw?hnungsvorschl?ge, die nicht angezeigt werden: überprüfen Sie die Methode suggestion.items, um sicherzustellen, dass sie die erwartete Liste filtert und zurückgibt.

Schritt 6: In Ihre App integrieren

Schlie?en Sie den Editor in eine modale oder Formularkomponente ein, um ihn zu einem Teil einer gr??eren Funktion zu machen, z. B. Benachrichtigungen oder Kommentare. Hier ist ein Beispiel:

import React from 'react';  

const NotificationForm = ({ mentions, onSubmit }) => {  
  const [content, setContent] = React.useState('');  
  return (  
    <form onSubmit={() => onSubmit(content)}>  
      <RichTextEditor content={content} onChange={setContent} mentions={mentions} />  
      <button type="submit">Send</button>  
    </form> 
  );  
};

Abschluss

Mit TipTap k?nnen Sie einen RichText-Editor erstellen, der sowohl leistungsstark als auch benutzerfreundlich ist. Durch das Hinzufügen von Erw?hnungen wird die Interaktivit?t Ihrer App verbessert und sie für Benutzer ansprechender.

Weitere Informationen finden Sie auf der offiziellen TipTap-Website. Haben Sie aus diesem Artikel etwas Neues gelernt? Lass es mich in den Kommentaren wissen! ?

Das obige ist der detaillierte Inhalt vonErstellen eines RichText-Editors mit TipTap in React (mit Erw?hnungen). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!