تخطَّ إلى المحتوى

React

المكوّن RichTextEditor والخطّاف useEditor() لـ React 18 فما فوق، ويعملان مع Remix وGatsby وVite.

في هذه الصفحة
الحزمة@open-wysiwyg-editor/react(يفتح في تبويب جديد)يتطلب React 18+

التثبيت

الطرفية
npm install @open-wysiwyg-editor/react

الاستخدام

import { useState } from "react";
import { RichTextEditor } from "@open-wysiwyg-editor/react";
import "@open-wysiwyg-editor/react/style.css";

export function Article() {
  const [html, setHtml] = useState("<p>Hello <strong>world</strong></p>");
  return <RichTextEditor value={html} onChange={setHtml} placeholder="Write something…" />;
}

معلومات مفيدة

  • آمن مع التصيير على الخادم: يعرض الخادم حاوية فارغة والحقل المخفي، ويبدأ المحرّر في المتصفح.
  • لا تُحمَّل value إلا إذا اختلفت عن آخر HTML أنتجه المحرّر، فلا يتحرك المؤشّر أثناء الكتابة.
  • تتبع دوال الاستدعاء والخيارات الديناميكية (editable وplaceholder وaria* وdir وcontentLang) كل إعادة تصيير. أما الباقي فيُقرأ عند التركيب فقط، فأعطِ المكوّن key جديدًا لتغييره.

عقّم دائمًا على الخادم

يعقّم المحرّر ما يحمّله وما ينتجه، لكن هذا ليس حدًّا أمنيًا: يستطيع أي شخص إرسال أي نص إلى واجهتك البرمجية. عقّم الـ HTML مرة أخرى بمكتبة تثق بها قبل تخزينه أو عرضه لمستخدمين آخرين.

عدّل هذه الصفحة على GitHub