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

Solid

موجّه use:richText لـ Solid 1.6 فما فوق وSolidStart. يُقرأ الكائن الذي تمرّره بشكل تفاعلي.

في هذه الصفحة

التثبيت

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

الاستخدام

import { createSignal } from "solid-js";
import { richText } from "@open-wysiwyg-editor/solid";
import "@open-wysiwyg-editor/solid/style.css";

richText; // keeps the import from being tree-shaken

export default function App() {
  const [html, setHtml] = createSignal("<p>Hello <strong>world</strong></p>");

  return (
    <>
      <div
        use:richText={{
          content: html(),
          placeholder: "Write something…",
          onUpdate: (editor) => setHtml(editor.getHTML()),
        }}
      />
      <pre>{html()}</pre>
    </>
  );
}

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

  • أبقِ السطر richText;. يحذف TypeScript وBabel الاستيرادات التي تبدو غير مستخدمة، بينما use:richText مجرد إشارة إلى الدالة.
  • لا تعمل الموجّهات إلا في المتصفح، فلا حاجة إلى حراسة بـ isServer.

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

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

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