与tiptap的React-Admin RichTextinput与图像扩展不起作用

Question

我想在React-Admin上插入我的RichTextinput组件，但这不起作用。
即使是在文档上使用水平all子的示例也无法正常工作。该按钮不起作用，默认情况下，RA-Input-input-text已经具有Horizo​​ntalrules扩展名，如果我在文本上输入“ ---”，则可以工作。

我想要的确切的是将图像URL放在工具栏上，并将其插入我的光标在编辑器上的位置。但是，即使是手动放置标签（如＆lt; img src =“ https://source.unsplash.com/8xznagy4hcy/800x400”/＆gt;），图像没有呈现。

This is my current RichTextInput component:

import {
    DefaultEditorOptions,
    RichTextInput,
    RichTextInputToolbar,
    LevelSelect,
    FormatButtons,
    AlignmentButtons,
    ListButtons,
    LinkButtons,
    QuoteButtons,
    ClearButtons
} from 'ra-input-rich-text';
import { ToggleButton } from '@mui/material';
import { useEditor } from '@tiptap/react'
import Image from '@tiptap/extension-image'
import Remove from '@mui/icons-material/Remove';

import { Box } from '@mui/material';

export const MyRichTextInput = ({ size, ...props }) => {
    const editor = useEditor(MyEditorOptions)
    return (
        <RichTextInput
            editorOptions={MyEditorOptions}
            toolbar={
                <RichTextInputToolbar>
                    <Box sx={{
                        display: 'flex',
                        flexDirection: 'row',
                        alignItems: 'center',
                        flexWrap: 'wrap',
                    }} >
                        <LevelSelect size={size} />
                        <FormatButtons size={size} />
                        <AlignmentButtons size={size} />
                        <ListButtons size={size} />
                        <LinkButtons size={size} />
                        <QuoteButtons size={size} />
                        <ClearButtons size={size} />
                    </Box>
                    <ToggleButton
                    value="Image"
                    aria-label="Add an image"
                    title="Add an image"
                    onClick={() => editor.chain().focus().setImage({ src: url }).run()}
                    selected={editor && editor.isActive('image')}
                >
                    <Remove fontSize="inherit" />
                </ToggleButton>
                </RichTextInputToolbar>
            }
            label="Body"
            source="body"
            {...props}
        />
    )
}

export const MyEditorOptions = {
    ...DefaultEditorOptions,
    extensions: [
        ...DefaultEditorOptions.extensions,
        Image
        
    ],
};

What I need to put an image and this be rendered here and in the "RichTextField"?以及如何创建一个按钮问我URL并将图像插入编辑器上？

Answer 1

他们将React Admin（我使用的4.15）更新为4.20，现在它支持图像和水平线。
现在工具栏响应迅速。

该问题中的信息信息： https：//github.com/marmeLab/marmelab/react-admin/问题/7806

Answer 2

TIPTAP通过操纵编辑器对象由目标richtextinput组件进行编辑。
您可以使用richtextinput组件访问编辑器对象，使用usetiptapeditor（）。
因此，您需要创建另一个按钮或工具栏组件，然后加载它。

然后， myimagebutton组件

import * as React from 'react';
import { useTranslate } from 'ra-core';
import { useTiptapEditor } from 'ra-input-rich-text';
import { ToggleButton } from '@mui/material';
import ImageIcon from '@mui/icons-material/Image';

export const MyImageButton = (props) => {
    const translate = useTranslate();
    const editor = useTiptapEditor();

    const label = translate('ra.tiptap.image', { _: 'Image' });

    const addImage = React.useCallback(() => {
        const url = window.prompt(
            translate('ra.tiptap.image_dialog', { _: 'Image URL' })
        );

        if (url) {
            editor.chain().focus().setImage({ src: url }).run();
        }
    }, [editor, translate]);

    return editor ? (
        <ToggleButton
            aria-label={label}
            title={label}
            {...props}
            disabled={!editor?.isEditable}
            value="image"
            onClick={addImage}
        >
            <ImageIcon fontSize="inherit" />
        </ToggleButton>
    ) : null;
};

将其加载到richtextinput中

import {
    DefaultEditorOptions,
    RichTextInput,
    RichTextInputToolbar,
    LevelSelect,
    FormatButtons,
    AlignmentButtons,
    ListButtons,
    LinkButtons,
    QuoteButtons,
    ClearButtons,
} from 'ra-input-rich-text';
import HorizontalRule from '@tiptap/extension-horizontal-rule';
import Image from '@tiptap/extension-image'
import { MyImageButton } from './CustomEditorInputImageButton';

export const MyRichTextInput = ({ size, ...props }) => {
    return (
        <RichTextInput
            toolbar={
                <RichTextInputToolbar>
                    <LevelSelect size={size} />
                    <FormatButtons size={size} />
                    <AlignmentButtons size={size} />
                    <ListButtons size={size} />
                    <LinkButtons size={size} />
                    <QuoteButtons size={size} />
                    <ClearButtons size={size} />
                    <MyImageButton />
                </RichTextInputToolbar>
            }
            label="Body"
            source="body"
            {...props}
        />
    );
}

export const MyEditorOptions = {
    ...DefaultEditorOptions,
    extensions: [
        ...DefaultEditorOptions.extensions,
        Image,
        HorizontalRule,
    ],
};