Membina Editor RichText dengan TipTap dalam React (dengan Sebutan)

Jika anda ingin meningkatkan apl React anda dengan editor RichText yang berkuasa dan boleh disesuaikan, TipTap ialah pilihan yang sangat baik. Tutorial ini akan membimbing anda melalui penyepaduan TipTap ke dalam projek anda dan menambahkan ciri sebutan untuk pengalaman pengguna yang dinamik.

Perkara yang Anda Akan Bina

Menjelang akhir tutorial ini, anda akan mempunyai:

1. Editor RichText berfungsi sepenuhnya dibina dengan TipTap.
2. Sokongan untuk sebutan yang dicetuskan oleh @, lengkap dengan senarai cadangan dinamik.
3. Pemahaman dalam menyelesaikan kes kelebihan seperti keterlihatan pemegang tempat dan pemeliharaan kursor.

Untuk mendapatkan maklumat lanjut tentang TipTap, lawati dokumentasi rasmi atau terokai repositori GitHub mereka.

Langkah 1: Pasang Ketergantungan
Sebelum menyelam, pasang perpustakaan yang diperlukan:

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

Langkah 2: Buat Editor RichText Asas

Mulakan dengan mencipta komponen RichTextEditor. Berikut ialah pelaksanaan mudah:

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} />;  
};

Langkah 3: Tambah Sebutan

Sebutan meningkatkan interaktiviti pengguna, terutamanya dalam sembang atau aplikasi kerjasama. Untuk melaksanakannya:

1. Pasang dan Konfigurasikan Sambungan Sebutan

Ubah suai komponen RichTextEditor untuk memasukkan sambungan Sebut:

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;  
}

Langkah 5: Kes Tepi yang Saya Hadapi Semasa Pelaksanaan

1. Melompat Kursor: Untuk mengelakkan kursor melompat semasa menaip, pastikan kemas kini kandungan mengekalkan kedudukan kursor:

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

1. Pemegang tempat Tidak Kelihatan:

Gunakan sambungan Pemegang Tempat untuk memaparkan pembayang apabila editor kosong:

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

1. Sebut Cadangan Tidak Dipaparkan: Semak kaedah suggestion.items untuk memastikan ia menapis dan mengembalikan senarai yang dijangkakan.

Langkah 6: Sepadukan ke dalam Apl Anda

Balut editor dalam komponen modal atau borang untuk menjadikannya sebahagian daripada ciri yang lebih besar, seperti pemberitahuan atau ulasan. Berikut ialah contoh:

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> 
  );  
};

Kesimpulan

Dengan TipTap, anda boleh membina editor RichText yang berkuasa dan mesra pengguna. Menambah sebutan meningkatkan interaktiviti apl anda, menjadikannya lebih menarik untuk pengguna.

Untuk maklumat lanjut, lawati tapak web rasmi TipTap. Adakah anda belajar sesuatu yang baru daripada artikel ini? Beritahu saya dalam komen! ?

Atas ialah kandungan terperinci Membina Editor RichText dengan TipTap dalam React (dengan Sebutan). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!