Svelte

أكشن use:richText لـ Svelte 3 و4 و5. لا تعمل الأكشنات على الخادم، فهو آمن في SvelteKit.

في هذه الصفحة

الحزمة@open-wysiwyg-editor/svelteيتطلب Svelte 3, 4 or 5

التثبيت

الطرفية

npm install @open-wysiwyg-editor/svelte

الاستخدام

<script lang="ts">
  import { richText } from "@open-wysiwyg-editor/svelte";
  import "@open-wysiwyg-editor/svelte/style.css";

  let html = $state("<p>Hello <strong>world</strong></p>");
</script>

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

<pre>{html}</pre>

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

تدخل content ويُعيد onUpdate الـ HTML. تُحمَّل التغييرات الخارجية في المحرّر، أما HTML الذي أنتجه المحرّر نفسه فلا يُعاد تحميله، فيبقى المؤشّر في مكانه.
مرّر أي خيار للمحرّر عدا element. تُطبَّق الخيارات الديناميكية فورًا، ويُقرأ الباقي عند إنشاء المحرّر (غلّف العنصر بـ {#key …} لإعادة إنشائه).

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

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

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