تركيب محرر النصوص البرمجية CodeMirror v6.65.7

ليست هناك تعليقات
كمطور هل إلتفت يوما إلى محرر النصوص الخاص بمنصة بلوجر وتسائلت عن مصدره؟!..هذا لأنك تحتاج مثل هذا المكون الإضافي في مشاريعك كمثال يمكنك صنع لوحة تحكم خاصة بك تجمع فيها جميع الأكواد التي تحتاجها في التكويد وبما أن مكتبة CodeMirror بحر واسع من المزايا سنكتفي في هذا الموضوع بطريقة التركيب كخطوة أساسية ثم يمكنك التوسع من خلال المصادر المرفقة لك.


لمحة عن CodeMirror

CodeMirror هو محرر نصوص متعدد الاستخدامات تم تنفيذه بلغة JavaScript للمتصفح. وهو متخصص في تحرير التعليمات البرمجية، ويأتي مع عدد من أوضاع اللغة والإضافات التي تنفذ وظائف تحرير أكثر تقدمًا.
ملحق هام
- الموقع الرسمي codemirror
- مصدر مكون codemirror على موقع cdnjs الإصدار 6.65.7 أو جميع الإصدارات من هنا
  1. مميزات
  2. دعم لأكثر من 100 لغة جاهزة للاستخدام
  3. نظام وضع اللغة القوي والقابل للتأليف
  4. الإكمال التلقائي ( XML )
  5. طي الكود
  6. اختصارات لوحة المفاتيح القابلة للتكوين
  7. روابط Vim و Emacs و Sublime Text
  8. واجهة البحث والاستبدال
  9. مطابقة الأقواس والعلامات​
  10. دعم للعرض المنقسم
  11. تكامل لنتر
  12. خلط أحجام وأنماط الخطوط
  13. مواضيع متنوعة
  14. القدرة على تغيير الحجم لتناسب المحتوى
  15. أدوات واجهة المستخدم المضمنة والمكشوفة
  16. المزاريب القابلة للبرمجة
  17. إنشاء نطاقات من النصوص المصممة للقراءة فقط أو الذرية
  18. دعم النص ثنائي الاتجاه
  19. العديد من الطرق والإضافات الأخرى ...

دعم المحرر

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

معاينة المحرر

تركيب المحرر

الخطوة الأولية - إنشاء الصفحة

  • إنتقل للمدونة المطلوبة >> ثم إلى الصفحات >> ثم قم بإنشاء صفحة جديدة بعنوان إنجليزي مثلا   codemirror  
  • من خلال >> إعدادات الصفحة >> خيارات >> تعليقات القراء >> عدم السماح
  • الآن إنتقل من وضع   التأليف إلى HTML ثم إحذف أي كود موجود
  • قم بنسخ كود html التالي وضعه داخل محرر الصفحة. 
    <!-- srs: https://cdnjs.com/libraries/codemirror/6.65.7 -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.js"></script>
<!-- srs: codemirror mode -->
<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>
<!-- srs: codemirror brace fold -->
<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/xml-fold.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/addon/fold/brace-fold.min.js"></script>
<!-- srs: codemirror search -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/addon/search/search.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/addon/search/searchcursor.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/addon/search/jump-to-line.min.js"></script>
<!-- srs: codemirror dialog -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/addon/dialog/dialog.min.js"></script>
<style type='text/css'>
/*<![CDATA[*/
pre{white-space:pre;word-wrap:break-word;text-align:left;direction:ltr}:root{--editor-height:500px}.CodeMirror{height:var(--editor-height)!important}.CodeMirror-rtl pre.CodeMirror-line{direction:rtl;text-align:right!important}.CodeMirror-dialog{position:absolute;left:0;right:0;background:inherit;z-index:15;padding:1em .8em;overflow:hidden;color:inherit;text-align:left}.CodeMirror-dialog-top{border-bottom:1px solid #eee;top:0}.CodeMirror-dialog-bottom{border-top:1px solid #eee;bottom:0}.CodeMirror-dialog input[type=text]{border:none;outline:0;background:0 0;width:20em;height:auto;color:inherit;font-family:monospace}.CodeMirror-dialog button{font-family:inherit;color:#ccc;background-color:#191c24;text-decoration:none;border:none;display:inline-block;padding:3px 8px;text-transform:uppercase;font-size:70%;-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;-o-border-radius:3px;border-radius:3px}.CodeMirror-foldmarker{color:#00f;text-shadow:#b9f 1px 1px 2px,#b9f -1px -1px 2px,#b9f 1px -1px 2px,#b9f -1px 1px 2px;font-family:arial;line-height:.3;cursor:pointer}.CodeMirror-foldgutter{width:.7em}.CodeMirror-foldgutter-folded,.CodeMirror-foldgutter-open{cursor:pointer}.CodeMirror-foldgutter-open:after{content:"\25BE"}.CodeMirror-foldgutter-folded:after{content:"\25B8"}.cm-s-ba88.CodeMirror .CodeMirror-foldmarker{color:#fff900;text-shadow:#00ff1d 1px 1px 2px,#00ff1d -1px -1px 2px,#00ff1d 1px -1px 2px,#00ff1d -1px 1px 2px}.cm-s-ba88.CodeMirror{background:#1e222c;color:#8c98b7}.cm-s-ba88 div.CodeMirror-selected{background:#a68164}.cm-s-ba88 .CodeMirror-line::-moz-selection,.cm-s-ba88 .CodeMirror-line::selection,.cm-s-ba88 .CodeMirror-line>span::-moz-selection,.cm-s-ba88 .CodeMirror-line>span::selection,.cm-s-ba88 .CodeMirror-line>span>span::-moz-selection,.cm-s-ba88 .CodeMirror-line>span>span::selection,.cm-s-ba88 .CodeMirror-selected,.cm-s-ba88 .CodeMirror-selectedtext{background:#a68164}.cm-s-ba88.CodeMirror pre{padding-left:0;color:#c7cce6}.cm-s-ba88 .CodeMirror-gutters{background:#1e222c;border-right:0}.cm-s-ba88 .CodeMirror-linenumber{color:#81839c;padding-right:10px}.cm-s-ba88 .CodeMirror-activeline .CodeMirror-linenumber.CodeMirror-gutter-elt{background:#1c1c1c;color:#81839c}.cm-s-ba88 .CodeMirror-linenumber{color:#81839c}.cm-s-ba88 .CodeMirror-cursor{border-left:2px solid #9098b1}.cm-s-ba88 .cm-searching{background:rgba(243,155,53,.3)!important;outline:1px solid #f39b35}.cm-s-ba88 .cm-searching.CodeMirror-selectedtext{background:rgba(243,155,53,.7)!important;color:#fff}.cm-s-ba88 .cm-keyword{color:#bfaeff}.cm-s-ba88 .cm-atom{color:#f39b35}.cm-s-ba88 .cm-number,.cm-s-ba88 span.cm-type{color:#a6e22e}.cm-s-ba88 .cm-def{color:#73b0ff}.cm-s-ba88 .cm-property,.cm-s-ba88 span.cm-variable{color:#c7cce6;font-style:normal}.cm-s-ba88 span.cm-variable-2{color:#da7dae;font-style:normal}.cm-s-ba88 span.cm-variable-3{color:#a06fca}.cm-s-ba88 .cm-type.cm-def{color:#5c6166;font-style:normal;text-decoration:underline}.cm-s-ba88 .cm-property.cm-def{color:#5c6166;font-style:normal}.cm-s-ba88 .cm-callee{color:#fc4384;font-style:normal}.cm-s-ba88 .cm-operator{color:#f39b35}.cm-s-ba88 .cm-qualifier,.cm-s-ba88 .cm-tag{color:#a6e22e}.cm-s-ba88 .cm-tag.cm-bracket{color:#a6e22e}.cm-s-ba88 .cm-attribute{color:#7aa2ff}.cm-s-ba88 .cm-comment{color:#e6db74;font-weight:400}.cm-s-ba88 .cm-comment.cm-tag{color:#e6db74}.cm-s-ba88 .cm-comment.cm-attribute{color:#e6db74}.cm-s-ba88 .cm-string{color:#ff4d4d}.cm-s-ba88 .cm-string-2{color:#ff4d4d}.cm-s-ba88 .cm-meta{color:#d4d4d4;background:inherit}.cm-s-ba88 .cm-builtin{color:#fc4384}.cm-s-ba88 .cm-header{color:#da7dae}.cm-s-ba88 .cm-hr{color:#98e342}.cm-s-ba88 .cm-link{color:#696d70;font-style:normal;text-decoration:none}.cm-s-ba88 .cm-error{border-bottom:1px solid #c42412}.cm-s-ba88 .CodeMirror-activeline-background{background:#272727}.cm-s-ba88 .CodeMirror-matchingbracket{outline:1px solid grey;color:#d4d4d4!important}
/*]]>*/
</style>
<textarea id="textareacode" name="textareacode" class="textarea hide"></textarea>
<script type='text/javascript'>
 /*<![CDATA[*/
  $(document).ready(function() {
var editor = CodeMirror.fromTextArea(document.getElementById("textareacode"), {
      mode: "text/html",//xml-css-javascript
      lineWrapping: true,
      lineNumbers: true,
      matchBrackets: true,
      styleActiveLine: true,
      direction: "ltr",
      extraKeys: {"Ctrl-Q": function(cm){ cm.foldCode(cm.getCursor()); }},
      foldGutter: true,
      gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
      theme: "default" //ba88 or default
    });
  });
 /*]]>*/
</script>
  • قم الآن بنشر الصفحة Publish ثم أعد تعديلها وغير عنوان الصفحة codemirror لما يناسبك
شرح مفاتيح المتغيرات الضرورية
  • المتغير mode خاص بتمييز نص البرمجي قم بتغيير القيمة حسب اللغة مثلا css أو javascript أو text/html
  • المتغير lineWrapping خاص بلف السطر نضع القيمة true للتشغيل أو false للتعطيل
  • المتغير lineNumbers خاص بالترقيم نضع القيمة true للتشغيل أو false للتعطيل
  • المتغير direction خاص بإتجاه النص نضع القيمة ltr لليمين أو rtl لليسار
  • المتغير foldGutter خاص بصندوق البحث والإستبدال نضع القيمة true للتشغيل أو false للتعطيل
  • المتغير theme خاص بالتيمة نضع القيمة default لون فاتح أو ba88 للون الداكن
ملاحظة:
المحرر يدعم خاصية لف النص وخاصية البحث السريع والإستبدال جرب الضغط على زر F+Ctrl للبحث أو F+⇧ Shift+Ctrl للإستبدال.

الخطوة الأخيرة - التهيئة

  • في الكود المحدد الذي شرحناه سابقا يمكن إضافة المزيد من الميزات وفي نفس الوقت يمكن توسعة مشروعك من خلال دعم المحرر الخاص بك بالملحقات مثلا لو أضفنا خاصية حقن النص editor.getDoc().setValue(""); والتي ستطبع في حقل المحرر كلمة Hello!!.بالشكل الآتي.. 
    var editor = CodeMirror.fromTextArea(document.getElementById("textareacode"), {
      mode: "text/html",//xml-css-javascript
      lineWrapping: true,
      lineNumbers: true,
      matchBrackets: true,
      styleActiveLine: true,
      direction: "ltr",
      extraKeys: {"Ctrl-Q": function(cm){ cm.foldCode(cm.getCursor()); }},
      foldGutter: true,
      gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
      theme: "default" //ba88 or default
    });
    
    editor.getDoc().setValue("Hello!!");
  • للحصول على النص الحالي للمحرر من خلال الخاصية editor.getValue(); مثلا لغرض إضافة زر حفظ النص كملف على الجهاز 
    • var editor = CodeMirror.fromTextArea(document.getElementById("textareacode"), {
      mode: "text/html",//xml-css-javascript
      lineWrapping: true,
      lineNumbers: true,
      matchBrackets: true,
      styleActiveLine: true,
      direction: "ltr",
      extraKeys: {"Ctrl-Q": function(cm){ cm.foldCode(cm.getCursor()); }},
      foldGutter: true,
      gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
      theme: "default" //ba88 or default
    });
    
let btn = document.createElement("button"); 
    btn.innerHTML = 'Download';
    btn.addEventListener('click',function(){
     var text = editor.getValue();
     var pom = document.createElement('a');
      
      console.log(text);
     pom.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
     pom.setAttribute('download', 'file.txt');

     if (document.createEvent) {
        var eventMouse = document.createEvent('MouseEvents');
        eventMouse.initEvent('click', true, true);
        pom.dispatchEvent(eventMouse);
     }else {
        pom.click();
     }
    });
    document.getElementById("textareacode").parentNode.insertBefore(btn, null);
  • كذلك من خلال الخاصية editor.setOption(); يمكن تغيير إعدادات المحرر ديناميكيا مثلا تغيير لغة المحرر 
    • editor.setOption("mode", "css");
  • قم بوضع كود html التالي..في المكان الذي تراه مناسب. 
    <select id="mode_codemirror">
  <option value="text/html">html</option>
  <option value="css">css</option>
  <option value="javascript">js</option>
</select>
  • قم بوضع كود js التالي..مباشرة أسفل شفرة الإعدادات بالشكل الآتي.. 
    var editor = CodeMirror.fromTextArea(document.getElementById("textareacode"), {
      mode: "text/html",//xml-css-javascript
      lineWrapping: true,
      lineNumbers: true,
      matchBrackets: true,
      styleActiveLine: true,
      direction: "ltr",
      extraKeys: {"Ctrl-Q": function(cm){ cm.foldCode(cm.getCursor()); }},
      foldGutter: true,
      gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
      theme: "default" //ba88 or default
    });
    
let selectmode = document.getElementById("mode_codemirror");
    selectmode.addEventListener('change',function(){
      editor.setOption("mode", this.value);
    });
    • نقطة مساعدة:
    يمكنك تطبيق نفس الخاصية على المتغير theme أو direction ومن خلال حدث change وعند التبديل بين الخيارات يتم تطبيق القيمة على المحرر. 
    
let selecttheme = document.getElementById("theme_codemirror");
    selecttheme.addEventListener('change',function(){
      editor.setOption("theme", this.value);
    });
check_circle
جميع الأمثلة التي شرحناها ستجدها في ورقة المعاينة

تعليقات

إرسال تعليق

إرسال تعليق

قد يهمك ايضا

  • إنشاء صفحة الإتصال على بلوجر متعددة الإستخدامات | نموذج طلب الإنضمام للمدونة

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

  • أداة ستجعل من الصعب فك تشفير شفرة المصدر | JavaScript Obfuscator Tool

    المطور
    صورة
    أداة مجانية متوفرة على النت تتيح لكم تحويل شفرة مصدر JavaScript الأصلية إلى تمثيل جديد يصعب فهمه ونسخه وإعادة استخدامه أوتعديله دون إذن. والرائع هو أنه مهما كان حجم وتداخل السكريبت المراد تشفيره سيكون للنتيجة المبهمة الوظيفة الدقيقة للرمز الأصلي..أقصد بدون الحصول على خطا بنسبة 99.99% أوليس هذا رائعا!!. ومن الرائع كذلك في هذه الأداة التي من خلال استخدام مختلف التحولات و"الفخاخ"، مثل ، الدفاع عن النفس و حماية التصحيح ستصعب قراءته باستخدام أدوات مضادة كأداة JS Beautifier إلا طبعا من محترف. لماذا أرغب في تعتيم رمز JavaScript الخاص بي؟ دعني أخبرك أن هناك العديد من الأسباب التي تجعل من الأفضل حماية التعليمات البرمجية الخاصة بك ، منها ماهو تقني ومنها ماهو تجاري على سبيل المثال إزالة التعليقات والمساحة البيضاء التي ليست مطلوبة. جعله أسرع في التحميل وصعوبة الفهم ؛ حماية المنتج المدفوع كالقوالب والإضافات التي سهرت على بنائها أشهر وأعوام فمن غير العدل أن تسرق منك وتنسب لغيرك..وفي المجمل لاتكن متساهل حتى لايفقد المجال رونقه والجمال الكامن في شطط البحث ومايصحبه من لذة النجاح فهل...
    أظهر المزيد

  • إضافة خاصية تقييم المحتوى على شكل نجوم بإستخدام تطبيق Firebase

    المطور
    صورة
    إضافة ستسمح لمتابعيك وزوار مدونتك يراجعون أعمالك الإبداعية ومنتجاتك وخدماتك من خلال خاصية التقييم بالنجوم بشكل رسمي فهي ليست مجرد واجهة أو زينة بل هي أداة رسمية بكل المقايس كونها تعرض لك نفس البيانات في نتائج بحث  Google  كما أنها ذكية التخصيص ويمكن التحكم في أغلب عناصرها بسهولة..والجميل في الموضوع أن الإضافة تابعة لـخدمات Google على رأسهم منصة - Blogger - وهذا يعني أنك لن تضطر للتسجيل في أي موقع للحصول على الأداة بل ستعمل وفقا لقاعدة بياناتك الخاصة على - Firebase -  والتي تتحكم بها كما تريد. الرجاء قبل إكمال الموضوع أحرص على أنك تملك معرف خاص بك لتطبيق - Firebase - إذا لاتملك واحد راجع هذا الموضوع بسرعة..ثم نكمل. إنشاء معرف تطبيق firebase من خلال واجهة المستخدم الجديدة 2020
    أظهر المزيد

  • ملحق إضافة الرموز التفاعلية لنظام تعليقات بلوجر الإصدار الأول v1

    المطور
    صورة
    الإصدار الأول من ملحق إضافة الرموز التفاعلية - الإبتسامات - و الصور والإقتباسات و رموز مقتطفة - شفرة برمجية - في نظام التعليق الخاص بمنصة البلوجر .  فكما نعلم نظام بلوجر للتعليقات هو بسيط وفعال جدا وفي كل مرحلة ما نرى تحسينات ومميزات تطرأ على هذا النظام . ولكن لا يزال يفتقر إلى العديد من الميزات التي هي موجودة في نظام التعليق ديسكس على سبيل المثال لا الحصر .. ومع ذلك لا يزال العديد من المدونين  يفضلون نظام تعليقات بلوجر. إذا فمن الضروري جدا أن يشمل النظام مثل هذا النوع من الملحقات  والتي من شأنها الزيادة في  إنتاجية ردود الفعل للزائر الخاص بك.
    أظهر المزيد

  • ملف كامل عن كيفية ترميز الخط بإستعمال تقنية سلسلة عناوين Data URLs

    المطور
    صورة
    ملف توضيحي عن كيفية إستعمال تقنية سلسلة عناوين ورل للبيانات Data URLs لترميز خطوط الويب  بتسلسل base64   لإستعمالها على الموقع الإلكتروني وبالأخص منصة البلوجر ، وكيف نستغل جميع الخطوط العربية الحاسوبية المجانية بتحويلها وتهيئتها لنستخدمها كخطوط ويب تعمل في جميع المتصفحات الحديثة، بما في ذلك إنترنيت إكسبلورر 8.
    أظهر المزيد