كيف اصنع محرر اكواد قوي في موقعي

علي الكاسر · 12 سبتمبر 2023

لقد سألت نفس السؤال واجاب احد الاخوه وارشدني إلى مكتبة prism-live.js وجربتها ونجحت ولكن بها عيوب حيث ان نص الكود لا يظهر بشكل كامل عندما يكون السطر طويل ولا ينزل المحرر سطر جديد للاسفل عندما يصل السطر إلى اخر صندوق الادخال كما في الصورة المرفقه، ناهيك انها لا تلون الاكواد التي داخل حاويات مثل div.

هل يوجد مكتبه اخرى لفعل محرر اكواد بشكل اقوى واحترافي

عبدالباسط ابراهيم · 12 سبتمبر 2023

هناك بدائل أكثر قوة واحترافية:

CodeMirror: من أقوى محررات الكود المصدرة مفتوحة المصدر، تدعم لغات متعددة وتنسيق تلوين الكود.
Ace Editor: محرر قوي آخر مفتوح المصدر يشبه Sublime Text وتنسيقاته.
Monaco Editor: المحرر الذي يستخدمه كل من VS Code و Azure Data Studio، يقدم تجربة قريبة من VS Code.
Draft.js: مكتبة رائعة لبناء محرر نصوص/HTML بجافاسكربت عالي الأداء.

هذه البدائل تدعم أغلب ميزات محررات الكود الاحترافية مع إمكانية التخصيص. جرب CodeMirror أو Ace أعتقد ستناسبك أكثر من prism-live.js.

Mustafa Suleiman · 12 سبتمبر 2023

سيتعين عليك تخصيص ذلك من خلال CSS، حيث أن الكود يتم كتابته في داخل عنصر textarea وبالتالي تستطيع تنسيق طريقة عرض النص وهو الكود من خلال CSS.

مكتبة prism توفر لك تلوين الأكواد أي عمل Highlighting وليس توفير موقع لتحرير الأكواد، أي سيتعين عليك التخصيص وبناء الموقع وفقًا لما تراه مناسبًا.

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

وإذا أردت الأسهل فعليك استخدام Ace Editor حيث يمكنك تضمين المكتبة مباشرًة واستخدام المحرر من خلال نسخة جاهزة كالتالي:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>ACE Code Lens demo</title>
    <style type="text/css" media="screen">
      body {
        overflow: hidden;
      }

      #editor {
        margin: 0;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
      }
    </style>
  </head>
  <body>
    <pre id="editor"></pre>

    <!-- load ace -->
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.24.2/ace.js"
      integrity="sha512-4gOhBb0ynE9P/pWgzXZA8AaPsS49vQpZI/AlBpUDKXH+AVZjEq6usVtcbrygkQkM0ztBvCt5AyLPZpN1Fcwnvg=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    ></script>
    <!-- load ace code_lens extension -->
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.24.2/ext-code_lens.min.js"
      integrity="sha512-81QPqjkXeCVN8i0OfBEGy3Ix+IwfmHwQ7D103quJuOs18KwgO6ra7L//1ZBU1LVMelSMweA0cAQSPAhXVa9zYQ=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    ></script>
    <script>
      var editor = ace.edit('editor');
      editor.session.setMode('ace/mode/html');

      var commandId = 'describeCodeLens';
      editor.commands.addCommand({
        name: commandId,
        exec: function (editor, args) {
          // services available in `ctx`
          alert('CodeLens command called with arguments ' + args);
        },
      });
      editor.commands.addCommand({
        name: 'clearCodeLenses',
        exec: function (editor, args) {
          editor.setOption('enableCodeLens', false);
          codeLens.clear(editor.session);
        },
      });
      editor.setOption('enableCodeLens', true);

      codeLens.registerCodeLensProvider(editor, {
        provideCodeLenses: function (session, callback) {
          var p = [
            {
              start: { row: 0 },
              command: {
                id: 'clearCodeLenses',
                title: 'Clear all code lenses',
                arguments: [],
              },
            },
          ];
          var l = session.getLength();

          for (var row = 2; row < l; row++) {
            var line = session.getLine(row);
            var endColumn = line.length;

            var m = /[{>]\s*$/.exec(line);
            if (!m) continue;

            p.push({
              start: {
                row: row,
                column: m.index,
              },
              command: {
                id: commandId,
                title: 'Line ' + (row + 1),
                arguments: ['line', row],
              },
            });

            if (m.index < 10) continue;
            p.push({
              start: {
                row: row,
                column: m.index,
              },
              end: {
                row: row,
                column: m.index + 1,
              },
              command: {
                id: commandId,
                title: 'column ' + endColumn,
                arguments: ['column', endColumn],
              },
            });

            if (m.index < 30) continue;
            p.push({
              start: {
                row: row,
                column: m.index,
              },
              command: {
                id: commandId,
                title: 'Third Link',
                arguments: ['3', row],
              },
            });
          }
          callback(null, p);
        },
      });

      window.editor = editor;
      window.codeLens = codeLens;
    </script>

    <!-- <script src="./show_own_source.js"></script> -->
  </body>
</html>

علي الكاسر · 12 سبتمبر 2023

بتاريخ 2 ساعة قال Mustafa Suleiman:

سيتعين عليك تخصيص ذلك من خلال CSS، حيث أن الكود يتم كتابته في داخل عنصر textarea وبالتالي تستطيع تنسيق طريقة عرض النص وهو الكود من خلال CSS.

مكتبة prism توفر لك تلوين الأكواد أي عمل Highlighting وليس توفير موقع لتحرير الأكواد، أي سيتعين عليك التخصيص وبناء الموقع وفقًا لما تراه مناسبًا.

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

وإذا أردت الأسهل فعليك استخدام Ace Editor حيث يمكنك تضمين المكتبة مباشرًة واستخدام المحرر من خلال نسخة جاهزة كالتالي:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>ACE Code Lens demo</title>
    <style type="text/css" media="screen">
      body {
        overflow: hidden;
      }

      #editor {
        margin: 0;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
      }
    </style>
  </head>
  <body>
    <pre id="editor"></pre>

    <!-- load ace -->
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.24.2/ace.js"
      integrity="sha512-4gOhBb0ynE9P/pWgzXZA8AaPsS49vQpZI/AlBpUDKXH+AVZjEq6usVtcbrygkQkM0ztBvCt5AyLPZpN1Fcwnvg=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    ></script>
    <!-- load ace code_lens extension -->
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.24.2/ext-code_lens.min.js"
      integrity="sha512-81QPqjkXeCVN8i0OfBEGy3Ix+IwfmHwQ7D103quJuOs18KwgO6ra7L//1ZBU1LVMelSMweA0cAQSPAhXVa9zYQ=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    ></script>
    <script>
      var editor = ace.edit('editor');
      editor.session.setMode('ace/mode/html');

      var commandId = 'describeCodeLens';
      editor.commands.addCommand({
        name: commandId,
        exec: function (editor, args) {
          // services available in `ctx`
          alert('CodeLens command called with arguments ' + args);
        },
      });
      editor.commands.addCommand({
        name: 'clearCodeLenses',
        exec: function (editor, args) {
          editor.setOption('enableCodeLens', false);
          codeLens.clear(editor.session);
        },
      });
      editor.setOption('enableCodeLens', true);

      codeLens.registerCodeLensProvider(editor, {
        provideCodeLenses: function (session, callback) {
          var p = [
            {
              start: { row: 0 },
              command: {
                id: 'clearCodeLenses',
                title: 'Clear all code lenses',
                arguments: [],
              },
            },
          ];
          var l = session.getLength();

          for (var row = 2; row < l; row++) {
            var line = session.getLine(row);
            var endColumn = line.length;

            var m = /[{>]\s*$/.exec(line);
            if (!m) continue;

            p.push({
              start: {
                row: row,
                column: m.index,
              },
              command: {
                id: commandId,
                title: 'Line ' + (row + 1),
                arguments: ['line', row],
              },
            });

            if (m.index < 10) continue;
            p.push({
              start: {
                row: row,
                column: m.index,
              },
              end: {
                row: row,
                column: m.index + 1,
              },
              command: {
                id: commandId,
                title: 'column ' + endColumn,
                arguments: ['column', endColumn],
              },
            });

            if (m.index < 30) continue;
            p.push({
              start: {
                row: row,
                column: m.index,
              },
              command: {
                id: commandId,
                title: 'Third Link',
                arguments: ['3', row],
              },
            });
          }
          callback(null, p);
        },
      });

      window.editor = editor;
      window.codeLens = codeLens;
    </script>

    <!-- <script src="./show_own_source.js"></script> -->
  </body>
</html>

شكرا اخي هذا المحرر ممتاز ولكن هل يمكن استخدامه داخل form في حق ادخال textarea حيث قد يكون textarea اكثر من حقل واحد

Mustafa Suleiman · 14 سبتمبر 2023

بتاريخ On 12‏/9‏/2023 at 18:55 قال علي الكاسر:

شكرا اخي هذا المحرر ممتاز ولكن هل يمكن استخدامه داخل form في حق ادخال textarea حيث قد يكون textarea اكثر من حقل واحد

بالتأكيد وإليك الطريقة:

إنشاء div إضافية لكل حقل textarea.
إنشاء كائن Ace Editor لكل حقل textarea داخل div الإضافية.
تحديث قيمة حقل textarea عند تغيير قيمة كائن Ace Editor المقابل.

<form>
  <label for="editor1">Editor 1</label>
  <div id="editor1"></div>
  <textarea name="editor1" style="display: none;"></textarea>

  <label for="editor2">Editor 2</label>
  <div id="editor2"></div>
  <textarea name="editor2" style="display: none;"></textarea>

  <input type="submit" value="Submit">
</form>

كود jQuery:

$(function () {
  const editor1 = ace.edit($('textarea[name="editor1"]'));
  const editor2 = ace.edit($('textarea[name="editor2"]'));

  editor1.getSession().on('change', function () {
    $('textarea[name="editor1"]').val(editor1.getSession().getValue());
  });

  editor2.getSession().on('change', function () {
    $('textarea[name="editor2"]').val(editor2.getSession().getValue());
  });
});

يجب تحديث قيمة حقل textarea عند تغيير قيمة كائن Ace Editor المقابل قبل إرسال النموذج وذلك باستخدام وظيفة .on('change') على كائن Ace Editor.

كيف اصنع محرر اكواد قوي في موقعي

السؤال

علي الكاسر

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

Recommended Posts

عبدالباسط ابراهيم

Mustafa Suleiman

علي الكاسر

Mustafa Suleiman

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية