صفتان للتحكم في تحرير المحتوى مباشرةً في الصفحة:
<contenteditable>: • يجعل أي عنصر HTML قابلاً للتحرير المباشر • true: قابل للتحرير • false: غير قابل (الافتراضي) • plaintext-only: قابل للتحرير لكن بنص عادي فقط • يُستخدم لبناء Rich Text Editors (محررات نصية) • المحتوى المُعدَّل يُقرأ بـ element.innerHTML أو element.textContent
<spellcheck>: • true: تفعيل التدقيق الإملائي (الافتراضي في textarea و contenteditable) • false: تعطيل التدقيق الإملائي • مفيد للـ code editors وحقول الكود • يعتمد على قاموس المتصفح',
| 1 | <!-- contenteditable: تحرير النص مباشرة --> |
| 2 | <div |
| 3 | contenteditable="true" |
| 4 | id="editable-div" |
| 5 | style="border: 1px solid #ccc; padding: 1rem; min-height: 100px;" |
| 6 | role="textbox" |
| 7 | aria-multiline="true" |
| 8 | aria-label="محرر النص" |
| 9 | > |
| 10 | <p>انقر هنا وابدأ الكتابة مباشرةً!</p> |
| 11 | </div> |
| 12 | |
| 13 | <button onclick="saveContent()">حفظ</button> |
| 14 | |
| 15 | <script> |
| 16 | function saveContent() { |
| 17 | const content = document.getElementById('editable-div').innerHTML; |
| 18 | console.log('المحتوى:', content); |
| 19 | } |
| 20 | </script> |
| 21 | |
| 22 | <!-- plaintext-only: نص عادي فقط بدون HTML --> |
| 23 | <div contenteditable="plaintext-only" class="plain-editor"> |
| 24 | اكتب هنا نصاً عادياً فقط |
| 25 | </div> |
| 26 | |
| 27 | <!-- spellcheck: التدقيق الإملائي --> |
| 28 | <textarea spellcheck="true" placeholder="اكتب رسالتك..."></textarea> |
| 29 | <input type="text" spellcheck="false" placeholder="كلمة مرور (بدون تدقيق)"> |
| 30 | |
| 31 | <!-- تعطيل التدقيق لمحرر كود --> |
| 32 | <div contenteditable="true" spellcheck="false" class="code-editor"> |
| 33 | function greet() { return "Hello"; } |
| 34 | </div> |
مثال 1: محرر ملاحظات بسيط
| 1 | <div class="note-editor"> |
| 2 | <toolbar> |
| 3 | <button onclick="format('bold')"><b>B</b></button> |
| 4 | <button onclick="format('italic')"><i>I</i></button> |
| 5 | <button onclick="format('underline')"><u>U</u></button> |
| 6 | <button onclick="saveNote()">💾 حفظ</button> |
| 7 | </toolbar> |
| 8 | |
| 9 | <div |
| 10 | id="note-content" |
| 11 | contenteditable="true" |
| 12 | spellcheck="true" |
| 13 | lang="ar" |
| 14 | dir="rtl" |
| 15 | aria-label="محرر الملاحظات" |
| 16 | style="min-height: 300px; padding: 1rem;" |
| 17 | > |
| 18 | <p>ابدأ كتابة ملاحظاتك هنا...</p> |
| 19 | </div> |
| 20 | </div> |
| 21 | |
| 22 | <script> |
| 23 | function format(command) { |
| 24 | document.execCommand(command, false, null); |
| 25 | } |
| 26 | |
| 27 | function saveNote() { |
| 28 | const content = document.getElementById('note-content').innerHTML; |
| 29 | localStorage.setItem('saved-note', content); |
| 30 | alert('تم الحفظ!'); |
| 31 | } |
| 32 | |
| 33 | // تحميل الملاحظة المحفوظة |
| 34 | window.onload = () => { |
| 35 | const saved = localStorage.getItem('saved-note'); |
| 36 | if (saved) { |
| 37 | document.getElementById('note-content').innerHTML = saved; |
| 38 | } |
| 39 | }; |
| 40 | </script> |