زر نسخ الكود

عبدالعزيز العتيبي9 · الخميس في 21:17

عندي اكواد بايثون في الدروس يصعب عند التطبيق فتح ملف وورد ونسخ الاكواد وتاخذ وقت طويل في الدرس

ابي اعمل صفحة html تحتوي على زر نسخ الكود و الكود لعدة امثلة ببرنامج ويب اكسبريشن كذلك عنوان لكل مثال

تم التعديل في الخميس في 21:18 بواسطة عبدالعزيز العتيبي9
اضافة

عبد الوهاب بومعراف · الجمعة في 08:25

أيّة دروس تقصد إن كانت متعلقة بالدورات فأرجو طرح أسئلتك أسفل الدرس الخاص به في صندوق التعليقات المخصص لذلك.

وفي حال كانت خارجية يمكنني توجيهك لكيفية حل المشكلة من خلال إنشاء صفحة HTML تحتوي على أقسام لكل مثال وكل قسم يحتوي على عنوان وكود برمجة داخل عنصر <pre> للحفاظ على التنسيق.

مع إضافة أزرار نسخ بجانب كل كود ثم تفعيلها باستخدام JavaScript عبر وظيفة تستخرج النص وتنسخه إلى الحافظة باستخدام navigator.clipboard يمكن أيضا تنسيق الصفحة باستخدام CSS ثم اختبار الصفحة في المتصفح للتأكد من عرض الأكواد وعملية النسخ بشكل صحيح بعد ذلك يمكنك حفظ الملف وتشغيله للاستخدام أثناء الدروس.

Adnane Kadri · منذ 15 ساعة

يمكنك القيام بالأمر باستخدام جافاسكربت وإسناد الوظيفة لحدث معين مثل الضغط على الزر، غالبا ما تكون الوظيفة كالتالي:

function copyToClipboard(id) {
       var text = document.getElementById(id).innerText;
       navigator.clipboard.writeText(text).then(function() {
           alert('تم نسخ الكود بنجاح!');
       }, function(err) {
          alert('فشل في نسخ الكود: ' + err);
       });
}

ثم يمكنك الاستماع لحدث الضغط وتنفيذ الوظيفة كالتالي:

<div class="code-container">
    <h2>اضغط للنسخ</h2>
    <pre class="code-block" id="code">النص المراد نسخه</pre>
    <button onclick="copyToClipboard('code')">نسخ الكود</button>
</div>

Mustafa Suleiman · منذ 9 ساعة

لا أنصحك باستخدام تقنية قديمة جدًا مثل Microsoft Expression Web بل اعتمد على لغات الويب وهم HTML, CSS, JS وبالأخص JS فهي لغة البرمجة التي ستوفر لك ما تحتاجه بخصوص تنفيذ المنطق الذي تريده عند الضغط على زر معين في الصفحة.

وبالأخص من خلال Clipboard API والذي توفره المتصفحات للنسخ واللصق وهو الطريقة الحديثة لفعل ذلك وليس Document.execCommand()‎.

وإليك مثال بسيط:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Copy to Clipboard Example</title>
</head>
<body>
    <input type="text" id="textToCopy" value="Copy this text!">
    <button onclick="copyToClipboard()">Copy Text</button>

    <script src="index.js"></script>
</body>
</html>

كود جافاسكريبت:

function copyToClipboard() {
    const textField = document.getElementById('textToCopy');

    // اختيار النص
    textField.select();
    textField.setSelectionRange(0, 99999); // For mobile devices

    navigator.clipboard.writeText(textField.value)
        .then(() => {
            console.log('Text copied to clipboard');
            alert('Text copied to clipboard: ' + textField.value);
        })
        .catch(err => {
            console.error('Failed to copy text: ', err);
        });
}

زر نسخ الكود

السؤال

عبدالعزيز العتيبي9

3 أجوبة على هذا السؤال

Recommended Posts

عبد الوهاب بومعراف

Adnane Kadri

Mustafa Suleiman

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية