React Markdown Editor Lite

React Markdown Editor Lite — это лёгкий (20 КБ в заархивированном виде) редактор Markdown на основе компонента React.

• Характеристики:
  • Поддержка TypeScript.
  • Поддержка пользовательского парсера Markdown.
  • Полная поддержка Markdown.
  • Поддерживает подключаемые функциональные панели.
  • Полный контроль над пользовательским интерфейсом.
  • Поддерживает загрузку изображений и перетаскивание.
  • Синхронная прокрутка между редактором и предварительным просмотром.

Демо

Онлайн-демонстрация: https://harrychen0506.github.io/react-markdown-editor-lite/.

Установка

npm install react-markdown-editor-lite --save
# или
yarn add react-markdown-editor-lite

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

Следуйте шагам:

1. Импортируйте React Markdown Editor Lite.
2. При необходимости зарегистрируйте плагины.
3. Инициализируйте парсер Markdown, например, markdown-it.
4. Начните использовать.

Пример кода:

// import react, react-markdown-editor-lite, and a markdown parser you like
import React from 'react';
import * as ReactDOM from 'react-dom';
import MarkdownIt from 'markdown-it';
import MdEditor from 'react-markdown-editor-lite';
// import style manually
import 'react-markdown-editor-lite/lib/index.css';

// Register plugins if required
// MdEditor.use(YOUR_PLUGINS_HERE);

// Initialize a markdown parser
const mdParser = new MarkdownIt(/* Markdown-it options */);

function handleEditorChange({ html, text }) {
  console.log('handleEditorChange', html, text);
}
export default props => {
  return (
    <MdEditor style={{ height: '500px' }} renderHTML={text => mdParser.render(text)} onChange={handleEditorChange} />
  );
};

• Свойства и конфигурации см. здесь.
• API см. здесь.
• Разработчики плагинов см. здесь.
• Полную демонстрацию см. здесь.

Использование в серверном рендеринге

Если вы используете фреймворк для серверного рендеринга, такой как Next.js или Gatsby, пожалуйста, используйте клиентский рендеринг для этого редактора.

Например, Next.js имеет next/dynamic, а Gatsby — loadable-components.

Следующий пример для Next.js:

import dynamic from 'next/dynamic';
import 'react-markdown-editor-lite/lib/index.css';

const MdEditor = dynamic(() => import('react-markdown-editor-lite'), {
  ssr: false,
});

export default function() {
  return <MdEditor style={{ height: '500px' }} renderHTML={/* Render function */} />;
}

С плагинами:

import dynamic from 'next/dynamic';
import 'react-markdown-editor-lite/lib/index.css';

const MdEditor = dynamic(
  () => {
    return new Promise(resolve => {
      Promise.all([
        import('react-markdown-editor-lite'),
        import('./my-plugin'),
        /** Add more plugins, and use below */
      ]).then(res => {
        res[0].default.use(res[1].default);
        resolve(res[0].default);
      });
    });
  },
  {
    ssr: false,
  },
);

export default function() {
  return <MdEditor style={{ height: '500px' }} renderHTML={/* Render function */} />;
}

Полный пример см. здесь.

Импорт в браузере

Начиная с версии 1.1.0, вы можете добавить теги script и link в свой браузер и использовать глобальную переменную ReactMarkdownEditorLite.

Вы можете загрузить эти файлы напрямую. Из:

from [![cdnjs][cdnjs-image]][cdnjs-url] [![jsdelivr][jsdelivr-image]][jsdelivr-url] [![unpkg][unpkg-image]][unpkg-url]

Note: you should import react before ReactMarkdownEditorLite.

For example, in webpack, you import ReactMarkdownEditorLite by script tag in your page, and write webpack config like this:

externals: {
  react: 'React',
  'react-markdown-editor-lite': 'ReactMarkdownEditorLite'
}

More demos

• Basic usage
• With unform
• Write a plugin
• Replace default icons
• In Next.js

Authors

• ShuangYa github/sylingd
• HarryChen0506 github/HarryChen0506

License

MIT

Перевод:

Из:

from [![cdnjs][cdnjs-изображение]][cdnjs-ссылка] [![jsdelivr][jsdelivr-изображение]][jsdelivr-ссылка] [![unpkg][unpkg-изображение]][unpkg-ссылка]

Обратите внимание: перед ReactMarkdownEditorLite необходимо импортировать React.

Например, в webpack вы импортируете ReactMarkdownEditorLite с помощью тега script на своей странице и пишете конфигурацию webpack следующим образом:

externals: {
  реакт: «React»,
  «react-markdown-editor-lite»: «ReactMarkdownEditorLite»
}

Дополнительные демонстрации

• Базовое использование.
• С unform.
• Создание плагина.
• Замена стандартных значков.
• В Next.js.

Авторы

— ShuangYa GitHub/sylingd. — HarryChen0506 GitHub/HarryChen0506.

Лицензия

MIT