См. английскую документацию здесь
Плагины могут добавлять кнопки в панель инструментов и управлять содержимым редактора.
См. 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',
'tab-insert'
]
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} />
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 можно:
Теперь мы создадим счётчик, который будет вставлять увеличивающееся число в редактор при каждом клике. Начальное число считывается из переданных параметров.
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 )