用TipTap管理图像扩展不起作用的TipTap

Question

我想插入我的RichTextInput组件上的React，但这不起作用。即使是文档中关于使用HorizontalRules的示例也不起作用。该按钮不工作，默认情况下，ra输入富文本已经有HorizontalRules扩展，如果我在文本上输入“--”，它就能工作。

确切地说，我想要的是将带有按钮的图像url放在我的工具栏上，然后将它插入到我的光标在编辑器上的位置。但是，即使手动放置标记(如img src="https://source.unsplash.com/8xznAGy4HcY/800x400“/>)，图像也不会呈现。

这是我当前的RichTextInput组件：

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
        
    ],
};

我需要把图像和这个呈现在这里和"RichTextField“中吗？以及如何创建一个按钮来询问我的url并在编辑器上插入图像？

Answer 1

他们更新了React (我使用了4.15)到4.20，现在它支持图像和水平线。现在工具栏已经响应了。

杂志上的Mor信息：https://github.com/marmelab/react-admin/issues/7806

Answer 2

提示通过操纵目标editor组件持有的RichTextInput对象来编辑输入。可以使用editor在目标RichTextInput组件的上下文中使用useTiptapEditor()访问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,
    ],
};