在 React 中使用 TipTap 建立 RichText 編輯器（含提及）

如果您想使用功能強大、可自訂的 RichText 編輯器增強您的 React 應用程序，TipTap 是一個絕佳的選擇。本教學將引導您將 TipTap 整合到您的專案中並添加提及功能以獲得動態使用者體驗。

你將建構什麼

在本教學結束時，您將擁有：

1. 使用 TipTap 建構的功能齊全的 RichText 編輯器。
2. 支援@觸發的提及，並配有動態建議清單。
3. 深入了解解決佔位符可見性和遊標保留等邊緣情況。

有關 TipTap 的更多信息，請訪問官方文檔或探索他們的 GitHub 存儲庫。

第 1 步：安裝依賴項
在深入之前，請安裝所需的庫：

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

第 2 步：建立基本 RichText 編輯器

先建立一個 RichTextEditor 元件。這是一個簡單的實作：

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

第 3 步：新增提及

提及增強了使用者互動性，尤其是在聊天或協作應用程式中。實作它們：

1. 安裝並設定提及擴充

修改 RichTextEditor 元件以包含 Mention 擴充：

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

第 5 步：我在實施過程中遇到的極端狀況

1. 遊標跳躍： 為了避免打字時標跳躍，請確保內容更新保留遊標的位置：

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

1. 佔位符不可見：

使用佔位符擴充在編輯器為空時顯示提示：

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

1. 未顯示的提及建議： 檢查 suggest.items 方法以確保它過濾並傳回預期的清單。

第 6 步：整合到您的應用程式中

將編輯器包裝在模式或表單元件中，使其成為更大功能的一部分，例如通知或評論。這是一個例子：

import React from 'react';  

const NotificationForm = ({ mentions, onSubmit }) => {  
  const [content, setContent] = React.useState('');  
  return (  
    

onSubmit(content)}> Send

); };

結論

使用 TipTap，您可以建立強大且使用者友好的 RichText 編輯器。添加提及可以增強應用程式的互動性，使其對使用者更具吸引力。

更多資訊請訪問TipTap官方網站。您從本文中學到新東西了嗎？請在評論中告訴我！ ？