1 В избранное 0 Ответвления 0

OSCHINA-MIRROR/mirrors-react-markdown-editor-lite

Присоединиться к Gitlife
Откройте для себя и примите участие в публичных проектах с открытым исходным кодом с участием более 10 миллионов разработчиков. Приватные репозитории также полностью бесплатны :)
Присоединиться бесплатно
Клонировать/Скачать
plugin.zh-CN.md 8.6 КБ
Копировать Редактировать Web IDE Исходные данные Просмотреть построчно История
gitlife-traslator Отправлено 01.12.2024 09:28 4497c67

Плагины

См. английскую документацию здесь

Что могут делать плагины?

Плагины могут добавлять кнопки в панель инструментов и управлять содержимым редактора.

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

См. API-документацию

Встроенные плагины

Список плагинов

Встроены следующие плагины:

  • header: заголовок;
  • font-bold: жирный шрифт;
  • font-italic: курсив;
  • font-underline: подчёркивание;
  • font-strikethrough: зачёркивание;
  • list-unordered: неупорядоченный список;
  • list-ordered: упорядоченный список;
  • block-quote: цитата;
  • block-wrap: перенос строки;
  • block-code-inline: встроенный код;
  • block-code-block: блочный код;
  • table: таблица;
  • image: загрузка изображения;
  • link: гиперссылка;
  • clear: очистить содержимое;
  • logger: история записей (отмена, повтор);
  • mode-toggle: переключение режимов отображения;
  • full-screen: переключение полноэкранного режима;
  • auto-resize: автоматическое изменение размера редактора (по умолчанию отключено);
  • tab-insert: вставка табуляции или пробела (по умолчанию отключена).
[
  'header',
  'font-bold',
  'font-italic',
  'font-underline',
  'font-strikethrough',
  'list-unordered',
  'list-ordered',
  'block-quote',
  'block-wrap',
  'block-code-inline',
  'block-code-block',
  'table',
  'image',
  'link',
  'clear',
  'logger',
  'mode-toggle',
  'full-screen',
  'tab-insert'
]
  • Если включён плагин logger, автоматически регистрируются два API undo и redo, которые можно вызвать с помощью callPluginApi.

Удаление встроенных плагинов

import Editor, { Plugins } from 'react-markdown-editor-lite';

Editor.unuse(Plugins.Header); // header
Editor.unuse(Plugins.FontBold); // font-bold

Использование плагина автоматического изменения размера

import Editor, { Plugins } from 'react-markdown-editor-lite';

Editor.use(Plugins.AutoResize, {
  min: 200, // минимальный размер
  max: 600, // максимальный размер
});

Использование плагина ввода с использованием табуляции

По умолчанию, когда пользователь нажимает клавишу Tab в области редактирования Markdown, фокус теряется. Можно использовать встроенный плагин ввода с использованием табуляции, чтобы решить эту проблему.

import Editor, { Plugins } from 'react-markdown-editor-lite';

Editor.use(Plugins.TabInsert, {
  /**
   * Количество пробелов, вводимых при нажатии клавиши Tab.
   * В частности, 1 означает ввод символа '\t', а не пробела.
   * По умолчанию значение равно 1.
   */
  tabMapValue: 1,
});

Вставка разделительной линии

divider — это особый плагин, который нельзя удалить, но и вручную добавлять его не нужно. Чтобы вставить разделитель в панель инструментов, просто добавьте divider в массив plugins.

import Editor, { Plugins } from 'react-markdown-editor-lite';

const plugins = ['header', 'table', 'divider', 'link', 'clear', 'divider', 'font-bold'];

<Editor plugins={plugins} />

Демо

import Editor, { Plugins } from 'react-markdown-editor-lite';
import MyPlugin from './MyPlugin';

Editor.use(MyPlugin);

// Удаляем все редакторы Header
Editor.unuse(Plugins.Header);

// Здесь удаляется встроенный плагин image, действует только для одного редактора
const plugins = ['header', 'table', 'my-plugins', 'link', 'clear', 'logger', 'mode-toggle', 'full-screen'];
<Editor plugins={plugins} />

NextJS Demo с пользовательским плагином

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

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

Написание плагинов

Демо

Посмотреть онлайн

Обычный способ

Сам по себе плагин является компонентом React, который должен наследоваться от PluginComponent.

В PluginComponent можно:

  • получить экземпляр редактора через this.editor и вызвать все API редактора;
  • получить настройки редактора через this.editorConfig;
  • получить данные, переданные при использовании, через this.getConfig или this.props.config.

Теперь мы создадим счётчик, который будет вставлять увеличивающееся число в редактор при каждом клике. Начальное число считывается из переданных параметров.

import { PluginComponent } from 'react-markdown-editor-lite';

interface CounterState {
  num: number;
}

class Counter extends PluginComponent<CounterState> {
  // Здесь определяется имя плагина, обратите внимание, что оно не должно повторяться
  static pluginName = 'counter';
  // Определяет, где разместить кнопку, по умолчанию слева, также можно разместить справа (right)
  static align = 'left';
  // Если необходимо, здесь можно определить параметры по умолчанию
  static defaultConfig = {
    start: 0
  }
  
  constructor(props: any) {
    super(props);

    this.handleClick = this.handleClick.bind(this);

    this.state = {
      num: this.getConfig('start')
    };
  }

  handleClick() {
    // Вызов API для вставки числа в редактор
    this.editor.insertText(this.state.num);
    // Обновление собственного состояния
    this.setState({
      num: this.state.num + 1
    });
  }

  render() {
    return (
      <span
        className="button button-type-counter"
        title="Counter"
        onClick={this.handleClick}
      >
        {this.state.num}
      </span>
    );
  }
}


// Использование:
Editor.use(Counter, {
  start: 10
});

Функциональные компоненты

Можно также использовать функциональные компоненты для написания плагинов.

import React from 'react';
import { PluginProps } from 'react-markdown-editor-lite';

interface CounterState {
... ```
num: number;
}

const Counter = (props: PluginProps) => {
  const [num, setNum] = React.useState(props.config.start);
  
  const handleClick = () => {
    // 调用API,往编辑器中插入一个数字
    props.editor.insertText(num);
    // 更新一下自身的state
    setNum(num + 1);
  }

  return (
    <span
      className="button button-type-counter"
      title="Counter"
      onClick={handleClick}
    >
      {num}
    </span>
  );
}
// 如果需要的话,可以在这里定义默认选项
Counter.defaultConfig = {
  start: 0
}
Counter.align = 'left';
Counter.pluginName = 'counter';

// 使用:
Editor.use(Counter, {
  start: 10
});

Можно ли не рендерить UI?

Можно, для этого функция render должна возвращать пустой элемент, например <span></span>.

Опубликовать ( 0 )

Вы можете оставить комментарий после Вход в систему

1
https://api.gitlife.ru/oschina-mirror/mirrors-react-markdown-editor-lite.git
git@api.gitlife.ru:oschina-mirror/mirrors-react-markdown-editor-lite.git
oschina-mirror
mirrors-react-markdown-editor-lite
mirrors-react-markdown-editor-lite
master