Web component

<owe-editor> هو المحرّر كاملًا في وسم HTML. عنصر مخصّص مرتبط بالنماذج ويعمل في الـ light DOM، فلا Shadow DOM وهو آمن مع CSP.

في هذه الصفحة

الحزمةopen-wysiwyg-editorيتطلب Safari 16.4+ for forms

التثبيت

الطرفية

npm install open-wysiwyg-editor

الاستخدام

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/open-wysiwyg-editor@1.0.2/dist/style.min.css"
  integrity="sha384-M7pJYu9d/6az43r7DEu11V2wYVSim/wfYwQjrNdn2lOz7ZEiPSh4lW4jwhjKC4RP" crossorigin="anonymous" />
<script src="https://cdn.jsdelivr.net/npm/open-wysiwyg-editor@1.0.2/dist/open-wysiwyg-editor.global.js"
  integrity="sha384-nj2QvSEBeAy8VfG/L3M7Hq+IbVQVrj5RyDnuO0Hy3p7EJrIaMo2Dku4YJoqUiK89" crossorigin="anonymous"></script>

<owe-editor id="editor" placeholder="Write something…">
  <template><p>Hello <strong>world</strong></p></template>
</owe-editor>

<script>
  document.querySelector("#editor").addEventListener("input", (event) => {
    console.log(event.target.value); // '<p dir="auto">Hello <strong>world</strong></p>'
  });
</script>

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

يُرسل النموذج HTML المحرّر تحت الاسم name، ويعيد form.reset() المحتوى الابتدائي. ويصبح <label for> الذي يشير إلى id العنصر اسمه المتاح لقارئات الشاشة.
استخدم خاصية value أو عنصر <template> حين يأتي المحتوى من المستخدمين، فلا يستطيع أيٌّ منهما تنفيذ شيء قبل أن يعقّمه المحرّر.

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

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

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