Редактор кода на JavaScript

CodeMirror: Редактор кода на JavaScript

· jQuery и JavaScript, Библиотеки и Блог · 1 мин чтения

В этой статье, я хочу представить вам отличный редактор кода, который можно легко добавить на ваш сайт.

CodeMirror — это качественный редактор кода, написанный на JavaScript. Он включает в себя много дополнений и подсвечивание разных языков программирование.

Демо

Демо можно посмотреть на по этой ссылке.

Скачать исходники

Скачать исходники плагина можно по этой ссылке.

Простая инструкция к использованию

  1. После того как вы скачали исходники, вам нужно подключить плагин к вашему сайту.
    <script src="lib/codemirror.js"></script>
    <link rel="stylesheet" href="lib/codemirror.css">
    <script src="mode/javascript/javascript.js"></script>

    Не забудьте поправит пути для codemirror.js, javascript.js и codemirror.css из подключаемых файлов выше.

  2. После того как подключили все файлы — зайдите на ваш сайт и откройте консоль. Если ошибок не, то продолжайте этап 3 (ниже), если есть, то исправьте их, скорее всего вы не правильно указали путь до файлов.
  3. Чтобы начать использовать плагин, вам нужно его инициализировать.
    var myCodeMirror = CodeMirror(document.body);

    Данный код подключит редактор к <body> тегу на вашем сайте. Если вы хотите указать какой-либо другой блок или элемент, то просто укажите нужный class или id.

    После обновления страницы, редактор начнет работать над <body>, но внутри ничего не будет. Чтобы что-то добавить туда следуйте 4-ому этапу(ниже).

  4. Если вы хотите, добавить что-то изначально в редактор, то вам нужно добавить дополнительные опции для плагина, как показано на примере ниже:
    var myCodeMirror = CodeMirror(document.body, {
      value: "function myScript(){return 100;}\n",
      mode:  "javascript"
    });

    value — это то, что появится внутри редактора при загрузке страницы.
    mode — это какой синтаксис используется для текущего редактора.

На этом все. Нравится ли вам такой плагин?

Если у вас есть какие-либо вопросы — задавайте их ниже под этой запись. Я буду рад вам помочь.

Комментарии