دليل شامل لدمج محرر CodeMirror في مشاريع الويب

HTML CSS JS

كمطور ويب، هل تساءلت يومًا عن كيفية إنشاء محرر أكواد متقدم مثل الموجود في منصات التدوين أو أدوات التطوير؟ محرر CodeMirror هو الحل الأمثل لمثل هذه المهام. في هذا الدليل الشامل، سنتعلم كيفية دمج هذا المحرر القوي في مشاريعنا خطوة بخطوة.

ما هو CodeMirror؟

CodeMirror هو محرر نصوص متطور مكتوب بلغة JavaScript، مصمم خصيصًا لتحرير الأكواد البرمجية في المتصفح. يتميز بواجهة نظيفة وسلسة تدعم العديد من لغات البرمجة.

المميزات الرئيسية:

دعم لأكثر من 100 لغة جاهزة للاستخدام
نظام وضع اللغة القوي والقابل للتأليف
الإكمال التلقائي ( XML )
طي الكود
اختصارات لوحة المفاتيح القابلة للتكوين
روابط Vim و Emacs و Sublime Text
واجهة البحث والاستبدال
مطابقة الأقواس والعلامات
دعم للعرض المنقسم
تكامل لنتر
خلط أحجام وأنماط الخطوط
مواضيع متنوعة
القدرة على تغيير الحجم لتناسب المحتوى
أدوات واجهة المستخدم المضمنة والمكشوفة
المزاريب القابلة للبرمجة
إنشاء نطاقات من النصوص المصممة للقراءة فقط أو الذرية
دعم النص ثنائي الاتجاه
العديد من الطرق والإضافات الأخرى ...

دعم المحرر

6+ IE
5+ Chrome
4+ Firefox
4+ Safari
10+ Opera
all Browser
2.2+ android
all touch

كيفية التركيب

إنتقل للمدونة المطلوبة ثم إلى الصفحات ثم قم بإنشاء صفحة جديدة بعنوان إنجليزي مثلا codemirror
من خلال إعدادات الصفحة خيارات تعليقات القراء عدم السماح
الآن إنتقل من وضع التأليف إلى HTML ثم إحذف أي كود موجود

قم بنسخ كود html التالي وضعه داخل محرر الصفحة.


<!-- محرر الأكواد -->
    <div class="editor-container">
        <div class="editor-toolbar">
            <div class="control-group">
                <label for="theme_codemirror">الثيم:</label>
                <select id="theme_codemirror">
                    <option value="default">وضع فاتح</option>
                    <option value="dracula">وضع مظلم</option>
                    <option value="eclipse">إكليبس</option>
                    <option value="material">ماتيريال</option>
                </select>
            </div>
            
            <div class="control-group">
                <label for="mode_codemirror">اللغة:</label>
                <select id="mode_codemirror">
                    <option value="htmlmixed">HTML</option>
                    <option value="css">CSS</option>
                    <option value="javascript">JavaScript</option>
                    <option value="xml">XML</option>
                </select>
            </div>
            
            <button id="download_btn">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
                    <polyline points="7 10 12 15 17 10"></polyline>
                    <line x1="12" y1="15" x2="12" y2="3"></line>
                </svg>
                تحميل الكود
            </button>
        </div>
        
        <textarea id="textareacode" style="display:none;">
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>مشروعي</title>
    <style>
        body {
            font-family: 'Tajawal', sans-serif;
            background-color: #f5f7fa;
            color: #333;
            line-height: 1.6;
        }
        
        h1 {
            color: #4361ee;
            text-align: center;
            margin: 2rem 0;
        }
    </style>
</head>
<body>
    <h1>مرحباً بك في مُحرر الأكواد الذهبي</h1>
    <p>ابدأ بكتابة الأكواد الخاصة بك...</p>
    
    <script>
        console.log('أهلاً بالعالم!');
    </script>
</body>
</html>
        </textarea>
    </div>

قم بنسخ كود css التالي وضعه داخل محرر الصفحة.


:root {
            --primary: #4361ee;
            --primary-dark: #3a0ca3;
            --gold: #ffd700;
            --dark: #1a1a2e;
            --light: #f8f9fa;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Tajawal', sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #f5f7fa 0%, #e4e8f0 100%);
            min-height: 100vh;
        }
        
        .header {
            background: linear-gradient(90deg, var(--dark) 0%, var(--primary-dark) 100%);
            color: white;
            padding: 1.5rem;
            text-align: center;
            position: relative;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        }
        
        .header::after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, var(--gold) 0%, #ff8c00 100%);
        }
        
        .header h1 {
            font-size: 2.2rem;
            margin-bottom: 0.5rem;
            background: linear-gradient(to right, var(--gold) 0%, #ffffff 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            text-shadow: 0 2px 4px rgba(0,0,0,0.2);
        }
        
        .header p {
            color: rgba(255,255,255,0.8);
            font-size: 1rem;
        }
        
        .editor-container {
            max-width: 1200px;
            margin: 2rem auto;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0,0,0,0.15);
        }
        
        .editor-toolbar {
            background: white;
            padding: 1rem;
            display: flex;
            flex-wrap: wrap;
            gap: 1rem;
            align-items: center;
            border-bottom: 1px solid #eee;
        }
        
        .control-group {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        label {
            font-weight: 600;
            color: var(--dark);
        }
        
        select, button {
            padding: 0.6rem 1rem;
            border-radius: 6px;
            border: 1px solid #ddd;
            font-family: inherit;
            transition: all 0.3s ease;
        }
        
        select {
            background: white;
            min-width: 140px;
            cursor: pointer;
        }
        
        select:focus {
            border-color: var(--primary);
            outline: none;
            box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.2);
        }
        
        button {
            background: var(--primary);
            color: white;
            font-weight: 600;
            border: none;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            cursor: pointer;
        }
        
        button:hover {
            background: var(--primary-dark);
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }
        
        .CodeMirror {
            height: 60vh;
            font-family: 'Fira Code', monospace;
            font-size: 14px;
            line-height: 1.6;
        }
        
        /* تصميم متجاوب */
        @media (max-width: 768px) {
            .header h1 {
                font-size: 1.8rem;
            }
            
            .editor-toolbar {
                flex-direction: column;
                align-items: stretch;
                gap: 0.8rem;
            }
            
            .control-group {
                flex-direction: column;
                align-items: stretch;
                gap: 0.3rem;
            }
            
            select, button {
                width: 100%;
            }
            
            .CodeMirror {
                height: 50vh;
            }
        }

قم بنسخ كود Js التالي وضعه داخل محرر الصفحة.


document.addEventListener('DOMContentLoaded', function() {
        // تهيئة المحرر
        const editor = CodeMirror.fromTextArea(document.getElementById("textareacode"), {
            mode: "htmlmixed",
            theme: "default",
            lineNumbers: true,
            lineWrapping: true,
            matchBrackets: true,
            autoCloseTags: true,
            foldGutter: true,
            gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
            extraKeys: {
                "Ctrl-S": saveCode,
                "Ctrl-Q": function(cm) { cm.foldCode(cm.getCursor()); },
                "F11": toggleFullscreen
            }
        });

        // تغيير الثيم
        document.getElementById("theme_codemirror").addEventListener("change", function() {
            editor.setOption("theme", this.value);
        });

        // تغيير لغة البرمجة
        document.getElementById("mode_codemirror").addEventListener("change", function() {
            editor.setOption("mode", this.value);
        });

        // زر التحميل
        document.getElementById("download_btn").addEventListener("click", saveCode);

        // دالة حفظ الكود
        function saveCode() {
            const code = editor.getValue();
            const mode = editor.getOption("mode");
            let extension = ".txt";
            
            const extensions = {
                "htmlmixed": ".html",
                "css": ".css",
                "javascript": ".js",
                "xml": ".xml"
            };
            
            extension = extensions[mode] || ".txt";
            
            const blob = new Blob([code], { type: "text/plain;charset=utf-8" });
            const url = URL.createObjectURL(blob);
            const a = document.createElement("a");
            a.href = url;
            a.download = "مشروعي" + extension;
            a.click();
            URL.revokeObjectURL(url);
            
            showNotification("تم حفظ الملف بنجاح!");
        }

        // دالة ملء الشاشة
        function toggleFullscreen() {
            if (!document.fullscreenElement) {
                document.documentElement.requestFullscreen().catch(err => {
                    console.error("حدث خطأ أثناء تفعيل وضع ملء الشاشة:", err);
                });
            } else {
                if (document.exitFullscreen) {
                    document.exitFullscreen();
                }
            }
        }

        // دالة عرض الإشعارات
        function showNotification(message) {
            const notification = document.createElement("div");
            notification.textContent = message;
            notification.style.position = "fixed";
            notification.style.bottom = "20px";
            notification.style.right = "20px";
            notification.style.backgroundColor = "#4CAF50";
            notification.style.color = "white";
            notification.style.padding = "12px 24px";
            notification.style.borderRadius = "4px";
            notification.style.zIndex = "1000";
            notification.style.boxShadow = "0 2px 10px rgba(0,0,0,0.2)";
            notification.style.animation = "fadeIn 0.3s ease-out";
            
            document.body.appendChild(notification);
            
            setTimeout(() => {
                notification.style.animation = "fadeOut 0.5s ease-out forwards";
                setTimeout(() => notification.remove(), 500);
            }, 3000);
        }

        // إضافة أنيميشن للإشعارات
        const style = document.createElement("style");
        style.textContent = `
            @keyframes fadeIn {
                from { opacity: 0; transform: translateY(20px); }
                to { opacity: 1; transform: translateY(0); }
            }
            
            @keyframes fadeOut {
                to { opacity: 0; transform: translateY(20px); }
            }
        `;
        document.head.appendChild(style);
    });

قم الآن بنشر الصفحة Publish ثم أعد تعديلها وغير عنوان الصفحة codemirror لما يناسبك

لبدء استخدام CodeMirror، تحتاج إلى إضافة ملفاته إلى مشروعك. يمكنك تحميلها أو استخدام روابط CDN:


<!-- خطوط Google -->
    <link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500&display=swap" rel="stylesheet">
   <!-- روابط CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/theme/dracula.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/addon/fold/foldgutter.min.css">
        <!-- مكتبات JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/htmlmixed/htmlmixed.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/css/css.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/javascript/javascript.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/xml/xml.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/addon/edit/matchbrackets.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/addon/fold/foldcode.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/addon/fold/foldgutter.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/addon/fold/brace-fold.min.js"></script>

الشرح الوافي لمحرر الأكواد الذهبي

الهيكل العام للكود

يتكون المشروع من عدة أجزاء رئيسية:

بنية HTML الأساسية: تحتوي على واجهة المستخدم وعناصر التحكم
تنسيقات CSS تتحكم في المظهر البصري للمحرر
وظائف JavaScript تضيف التفاعلية والميزات المتقدمة

الشرح التفصيلي

قسم الرأس (Header)


<header class="header">
    <h1>مُحرر الأكواد الذهبي</h1>
    <p>أداة متكاملة لكتابة وتحرير الأكواد باحترافية</p>
</header>

يعرض عنواناً رئيسياً ووصفاً للمحرر
يتميز بتصميم متدرج اللون مع خط ذهبي
يحتوي على شريط ذهبي في الأسفل للتأكيد البصري

شريط الأدوات (Toolbar)


<div class="editor-toolbar">
    <div class="control-group">
        <label for="theme_codemirror">الثيم:</label>
        <select id="theme_codemirror">
            <option value="default">وضع فاتح</option>
            <option value="dracula">وضع مظلم</option>
        </select>
    </div>
</div>

يحتوي على عناصر تحكم لتخصيص المحرر
اختيار الثيم (مظهر المحرر)
اختيار لغة البرمجة
زر لتحميل الكود

منطقة المحرر الرئيسية


<textarea id="textareacode" style="display:none;">
<!DOCTYPE html>
<!-- محتوى HTML افتراضي -->
</textarea>

عنصر textarea مخفي يستخدم كحاوية لتهيئة محرر CodeMirror
يحتوي على نموذج HTML افتراضي يظهر عند فتح المحرر

تنسيقات CSS الرئيسية


:root {
    --primary: #4361ee;
    --primary-dark: #3a0ca3;
    --gold: #ffd700;
    --dark: #1a1a2e;
    --light: #f8f9fa;
}

تعريف متغيرات الألوان لإعادة استخدامها
تصميم متجاوب يعمل على جميع أحجام الشاشات
تأثيرات حركية عند التحويم على الأزرار

تهيئة محرر CodeMirror


const editor = CodeMirror.fromTextArea(
  document.getElementById("textareacode"), {
    mode: "htmlmixed",
    theme: "default",
    lineNumbers: true,
    // خيارات أخرى
});

تحويل عنصر textarea إلى محرر أكواد متقدم
خيارات التهيئة تشمل:
- mode: لغة البرمجة الافتراضية (HTML مختلط)
- theme: المظهر الافتراضي (فاتح)
- lineNumbers: عرض أرقام الأسطر

وظائف JavaScript الرئيسية

تغيير الثيم


document.getElementById("theme_codemirror")
  .addEventListener("change", function() {
    editor.setOption("theme", this.value);
});

تغيير لغة البرمجة


document.getElementById("mode_codemirror")
  .addEventListener("change", function() {
    editor.setOption("mode", this.value);
});

حفظ الكود


function saveCode() {
  const code = editor.getValue();
  const blob = new Blob([code], 
    { type: "text/plain;charset=utf-8" });
  // إنشاء رابط تحميل
}

وضع ملء الشاشة


function toggleFullscreen() {
  if (!document.fullscreenElement) {
    document.documentElement.requestFullscreen();
  } else {
    document.exitFullscreen();
  }
}

مكتبات CodeMirror المستخدمة


<!-- المكتبة الأساسية -->
<script src="https://cdnjs.cloudflare.com/.../codemirror.min.js"></script>

<!-- أوضاع اللغات -->
<script src="https://cdnjs.cloudflare.com/.../htmlmixed.min.js"></script>
<script src="https://cdnjs.cloudflare.com/.../javascript.min.js"></script>

ميزات إضافية

اختصارات لوحة المفاتيح:
- Ctrl+S: لحفظ الكود
- Ctrl+Q: لطي/فك الأكواد
- F11: لتفعيل وضع ملء الشاشة
إشعارات المستخدم: تظهر عند تنفيذ الإجراءات
تصميم متجاوب: يعمل على جميع الأجهزة
دعم متعدد للغات: HTML, CSS, JavaScript, XML

هذا المحرر يوفر بيئة متكاملة لكتابة الأكواد البرمجية مع ميزات متقدمة تتيح للمطورين العمل بكفاءة واحترافية.

معاينة الكــود

معــايــنة رابط التحميل

اوعي وشك

استكشف في مدونة أوعي وشك عالم الابتكار

تركيب محرر النصوص البرمجية CodeMirror علي مدونتك

دليل شامل لدمج محرر CodeMirror في مشاريع الويب

ما هو CodeMirror؟

المميزات الرئيسية:

دعم المحرر

كيفية التركيب

الشرح الوافي لمحرر الأكواد الذهبي

الهيكل العام للكود

الشرح التفصيلي

قسم الرأس (Header)

شريط الأدوات (Toolbar)

منطقة المحرر الرئيسية

تنسيقات CSS الرئيسية

تهيئة محرر CodeMirror

وظائف JavaScript الرئيسية

تغيير الثيم

تغيير لغة البرمجة

حفظ الكود

وضع ملء الشاشة

مكتبات CodeMirror المستخدمة

ميزات إضافية

معاينة الكــود

كيف كان المقال؟

كاتب المقال

إرسال تعليق

الدردشة عبر واتساب

إرسال طلب

مجموعة شاملة لتصاميم العناوين باستخدام CSS

إنشاء زر تنزيل جميل ومثير للإعجاب على بلوجر

شرح العنصر dialog فيHTML

كيفية إنشاء صندوق ملاحظات ملون على مدونة

طريقة حذف الرمز ?m=1 في رابط مدونتك أو موقعك على بلوجر

اوعي وشك

استكشف في مدونة أوعي وشك عالم الابتكار