Описание

Этот проект был создан с помощью Angular CLI версии Yöntem 1.5.0.

Последнее время использую Angular в качестве backend, и мне требовался markdown-редактор. Нашёл множество вариантов, но большинство из них были на HTML, и после долгих попыток установил, что они не поддерживают NgModel; также нашёл модули, написанные на Angular, но после интеграции в проект выяснилось, что они не выглядят так красиво, как хотелось бы.

Наконец, случайно наткнулся на рекомендацию одного пользователя блога CSDN, где он упомянул markdown-редактор. Открыв его, я был приятно удивлен — он идеально подходил! Он выглядел так же, как любимый мной редактор CSDN, который тоже использует этот пример. Это редактор Editor.md. Адрес: https://pandao.github.io/editor.md/

Он выглядит примерно так:

Структура команд:

Подробный код можно найти самостоятельно.

Использование

Выбрав нужный мне вариант Markdown, начал интегрировать его в Angular. В результате создал директиву, которая поддерживает NgModel.

• Установите jquery с помощью npm или yarn.

  npm install jquery
  или
  yarn add jquery

• Скачайте файлы editor.md, распакуйте их и поместите в папку assets.

Описание

Этот проект был создан с помощью Angular CLI версии 1.5.0.

Последнее время использую Angular в качестве backend, и мне требовался markdown-редактор. Нашёл множество вариантов, но большинство из них были на HTML, и после долгих попыток установил, что они не поддерживают NgModel; также нашёл модули, написанные на Angular, но после интеграции в проект выяснилось, что они не выглядят так красиво, как хотелось бы.

Наконец, случайно наткнулся на рекомендацию одного пользователя блога CSDN, где он упомянул markdown-редактор. Открыв его, я был приятно удивлен — он идеально подходил! Он выглядел так же, как любимый мной редактор CSDN, который тоже использует этот пример. Это редактор Editor.md. Адрес: https://pandao.github.io/editor.md/

Он выглядит примерно так:

Структура команд:

Подробный код можно найти самостоятельно.

Использование

Выбрав нужный мне вариант Markdown, начал интегрировать его в Angular. В результате создал директиву, которая поддерживает NgModel.

• Установите jquery с помощью npm или yarn.

  npm install jquery
  или
  yarn add jquery

• Скачайте файлы editor.md, распакуйте их и поместите в папку assets.- Настройте css и js для editor.md в файле .angular-cli.json.

  "styles": [
    "assets/editor.md/css/editormd.css",
    "styles.css"
  ],
  "scripts": [
    "../node_modules/jquery/dist/jquery.js",
    "assets/editor.md/editormd.min.js"
  ]

• Для использования textarea потребуется FormsModule. Не забудьте его импортировать, а также добавьте директиву EditorMdDirective в ваш модуль.

• Пример использования:

  HTML

  <div id="md" appEditorMd [editormdConfig]="conf" (onEditorChange)="syncModel($event)">
    <textarea style="display: block;" [(ngModel)]="markdown"></textarea>
  </div>

  Компонент

  conf = new EditorConfig();
  markdown = 'Тестовое сообщение';
  
  // Обновляем модель данных
  syncModel(str): void {
    this.markdown = str;
  }

Далее приведены скриншоты:

Дополнительные настройки можно найти в официальной документации Editor.md.