@4giving/r-m-e 中文文档教程

Question

@4giving/r-m-e

This is a modified clone of Rich Markdown Editor。

Usage

Install

yarn add @4giving/r-m-e

或者

npm install @4giving/r-m-e

请注意，react、react-dom 和 styled-components 是必需的 对等依赖项。

Import

import Editor from '@4giving/r-m-e';

<Editor defaultValue="Hello world!" />;

请参阅示例目录 中的工作示例，其中包含许多示例道具。

Props

id

此编辑器的唯一 ID，用于保留折叠标题等设置。 如果未传递 id，则编辑器将默认使用位置路径名。

defaultValue

表示编辑器初始值的降价字符串。 用这个来支撑恢复 以前保存的内容供用户继续编辑。

value

表示编辑器值的降价字符串。 一旦安装，使用此属性更改编辑器的值，这将重新呈现整个编辑器，因此仅适用于 readOnly 模式。 不要将 onChange 的值通过管道返回到 value 中，编辑器会保留它自己的内部状态，这会导致意想不到的副作用。

placeholder

允许覆盖占位符。 默认是“写点好东西……”。

readOnly

当 readOnly 设置为 false 时，编辑器针对合成进行了优化。 当 true 时，编辑器可用于显示以前编写的内容——标题获得锚点并且链接变得可点击。

readOnlyWriteCheckboxes

当 readOnlyWriteCheckboxes 设置为 true 时，复选框仍然可以作为一种特殊情况被选中或取消选中，而 readOnly 被设置为 true否则无法编辑编辑器。

autoFocus

当设置 true 和 readOnly 设置为 false 时，焦点在最后 自动记录。

extensions

允许将额外的 Prosemirror 插件传递给底层的 Prosemirror 实例。

theme

允许覆盖内置主题以标记编辑器，例如使用您自己的字体和品牌颜色使编辑器适合您的应用程序。 请参阅内置主题，以获取应提供的键的示例。

dictionary

允许覆盖内置的复制字典，例如使编辑器国际化。 请参阅内置字典，以获取应提供的键的示例。

dark

当 dark 设置为 true 时，编辑器将使用包含的默认深色主题。 请参阅此处的来源。

tooltip

一个 React 组件，它将包裹在具有可选工具提示的项目周围。 您可以使用它来将您自己的工具提示库注入编辑器——该组件将传递以下属性：

• tooltip: A React node with the tooltip content
• placement: Enum top, bottom, left, right
• children: The component that the tooltip wraps, must be rendered

headingsOffset

一个将文档标题偏移多个级别的数字。 例如，如果您已经将编辑器嵌套在主 h1 标题下，您可能希望用户只能创建 h2 标题及以下标题，在这种情况下，您可以设置1 的道具。

scrollTo

表示标题锚点的字符串——文档将平滑滚动以便标题可见 在视口中。

embeds

可选地定义嵌入，当 matcher 函数返回真值时，嵌入将被插入以代替链接。 匹配器方法的返回值将在 props.attrs.matches 下的组件上可用。 如果提供了 title 和 icon，则嵌入也会出现在块菜单中。

<Editor
    embeds={[
        {
            title: 'Google Doc',
            keywords: 'google docs gdocs',
            icon: <GoogleDocIcon />,
            matcher: href => href.matches(/docs.google.com/i),
            component: GoogleDocEmbed
        }
    ]}
/>

Callbacks

onSave({ done: boolean }): void

当用户使用键盘快捷键 Cmd+S 或 Cmd+Enter 明确请求保存时，会触发此回调。 您可以将其用作将文档保存到远程服务器的信号。

onCancel(): void

当在编辑器中点击 Cmd+Escape 时会触发此回调。 您可以使用它来取消编辑。

onChange(() => value): void

当编辑器的内容发生变化时会触发此回调，通常是由于用户输入（例如击键）或使用格式选项。 您可以使用它在本地保留编辑器状态，请参阅内置示例。

它返回一个函数，该函数在被调用时返回文档的当前文本值。 进行此优化是为了避免在每次更改事件时将文档状态序列化为文本，从而允许主机应用程序选择何时需要序列化值。

onClickLink(href: string, event: MouseEvent): void

此回调允许覆盖链接处理。 通常情况下，您希望让外部链接打开一个新窗口，并让内部链接使用诸如 react-router 之类的东西来导航。 如果未提供回调，则打开新选项卡的默认行为将应用于所有链接。 例如：

import { history } from 'react-router';

<Editor
    onClickLink={(href, event) => {
        if (isInternalLink(href)) {
            history.push(href);
        } else {
            window.location.href = href;
        }
    }}
/>;

onHoverLink(event: MouseEvent): boolean

此回调允许检测用户何时将鼠标悬停在文档中的链接上。

<Editor
    onHoverLink={event => {
        console.log(`Hovered link ${event.target.href}`);
    }}
/>

handleDOMEvents: {[name: string]: (view: EditorView, event: Event) => boolean;}

此对象映射事件名称（focus，paste< /code>、touchstart 等）回调函数。

<Editor
    handleDOMEvents={{
        focus: () => console.log('FOCUS'),
        blur: () => console.log('BLUR'),
        paste: () => console.log('PASTE'),
        touchstart: () => console.log('TOUCH START')
    }}
/>

insertImageHandler: () => (imageUrl: string);

这允许您获得一种方法，该方法将为您插入图像 url 字符串，从而消除通过此工具上传图像的依赖。

<Editor
    insertImageHandler={handler => {
        handler('https://picsum.photos/600/600');
    }}
/>

Interface

Editor 组件公开了一些与已安装的编辑器进行交互的方法。

focusAtStart(): void

将光标放在文档的开头并将其聚焦。

focusAtEnd(): void

将光标放在文档的末尾并将其聚焦。

getHeadings(): { title: string, level: number, id: string }[]

返回一个对象数组，其中包含文档中所有标题的文本内容， 它们在层次结构中的级别，以及锚点 ID。 这对于构建您自己的目录很有用，因为 toc 选项在 v10 中被删除了。

Contributing

该项目使用 yarn 来管理依赖项。 您可以使用 npm，但它不会遵守 yarn lock 文件，并且可能会安装略有不同的版本。

yarn install

在开发中运行时，包含 webpack-serve 以提供具有热重载功能的示例编辑器。 安装依赖项后运行 yarn start 开始。

License

这个项目是 BSD 许可的。