Название проекта: Editor.md -- редактор Markdown

Адрес открытого исходного кода на GitHub: https://github.com/pandao/editor.md

Адрес онлайн-тестирования: https://pandao.github.io/editor.md/

Полный пример: http://editor.md.ipandao.com/examples/html-preview-markdown-to-html.html

В современном интернет-мире Markdown стал предпочтительным языком разметки для создателей контента, разработчиков и технических писателей. Он широко популярен благодаря своему лаконичному синтаксису и удобочитаемому формату.

Editor.md — это онлайн-редактор Markdown с открытым исходным кодом, который можно встраивать, построенный на CodeMirror, jQuery и Marked. Его появление обеспечивает пользователям более удобный и многофункциональный опыт редактирования Markdown.

Editor.md — это мощный, гибкий и простой в использовании редактор Markdown. Он предоставляет эффективное решение для онлайн-редактирования энтузиастам и профессионалам Markdown.

Editor.md предлагает богатые возможности и плагины, позволяя пользователям настраивать его в соответствии со своими потребностями. Например, пользователи могут использовать плагины для редактирования математических формул, рисования блок-схем и диаграмм последовательностей и даже реализации многопользовательского совместного редактирования.

На главной странице представлено множество примеров для изучения и использования:

Простой пример:

Нарисуйте диаграмму последовательности:

Editor.md обладает следующими возможностями:

  • WYSIWYG (что видишь, то и получаешь): Editor.md предоставляет интуитивно понятный интерфейс редактирования, позволяя пользователям видеть отрендеренный результат текста Markdown в реальном времени.

  • Высокая настраиваемость: С помощью параметров конфигурации пользователи могут настраивать внешний вид и поведение редактора в соответствии с различными сценариями использования и фирменными стилями.

  • Богатая поддержка плагинов: Editor.md поддерживает множество плагинов, таких как загрузка изображений, эмодзи, подсветка кода и т. д., что значительно расширяет функциональность редактора.

  • Кроссплатформенная совместимость: Будь то настольные или мобильные устройства, Editor.md обеспечивает плавный опыт редактирования.

  • Легко интегрируется: Как компонент, Editor.md можно бесшовно интегрировать в существующие веб-приложения или сервисы без сложной настройки.

Сценарии использования Editor.md:

  • Блоги и CMS-системы: Предоставляют функциональность редактирования Markdown для систем управления контентом, позволяя авторам сосредоточиться на создании.
  • Форумы и сообщества: Предоставляют редактор Markdown на платформах с пользовательским контентом, чтобы повысить качество публикаций.
  • Документация и базы знаний: Предоставляют редактор Markdown для технической документации и справочных центров, чтобы обеспечить единообразное форматирование документов.
  • Личные сайты и портфолио: Предоставляют редактор Markdown для личных проектов, что упрощает быстрое обновление и поддержку.

Установка

Способ установки через npm:

npm install editor.md

Способ установки через Bower:

bower install editor.md

Создание редактора Markdown:

Примеры

<link rel="stylesheet" href="editor.md/css/editormd.min.css" />
<div id="editor">
    <!-- Советы: Editor.md может автоматически добавить тег `<textarea>` -->
    <textarea style="display:none;">### Привет Editor.md !</textarea>
</div>
<script src="jquery.min.js"></script>
<script src="editor.md/editormd.min.js"></script>
<script type="text/javascript">
    $(function() {
        var editor = editormd("editor", {
            // width: "100%",
            // height: "100%",
            // markdown: "xxxx", // динамически задать текст Markdown
            path : "editor.md/lib/" // Режим автозагрузки модулей, codemirror, marked... путь к зависимым библиотекам
        });
    });
</script>

Markdown в HTML:

Примеры

<link rel="stylesheet" href="editormd/css/editormd.preview.css" />
<div id="test-markdown-view">
    <!-- Вывод текста Markdown на стороне сервера -->
    <textarea style="display:none;">### Привет, мир!</textarea>            
</div>
<script src="jquery.min.js"></script>
<script src="editormd/editormd.js"></script>
<script src="editormd/lib/marked.min.js"></script>
<script src="editormd/lib/prettify.min.js"></script>
<script type="text/javascript">
    $(function() {
            var testView = editormd.markdownToHTML("test-markdown-view", {
            // markdown : "[TOC]\n### Привет, мир!\n## Заголовок 2", // Также можно динамически задавать текст Markdown
            // htmlDecode : true, // Включить / отключить кодирование HTML-тегов.
            // htmlDecode : "style,script,iframe", // Примечание: если включено, следует отфильтровать некоторые опасные HTML-теги для безопасности сайта.
        });
    });
</script>