Question

我有一个React Dropzone组件，该组件拍摄一张图像，上传它，然后以

链接回该图像。

我可以在DraftJS中设置自定义元素，但是我的问题是用户可以选择和删除该实体，我希望该实体始终存在并且不可移动和不可删除。

这是我的组件：

export const ContentItemInlineTextImage = (props: IContentItemTextProps) => {
    const { onChange } = props
    const imageUrl = props.value && !strIsNullOrEmpty(props.value.imageUrl) ? props.value.imageUrl : "https://cdn.bulbagarden.net/upload/thumb/0/0d/025Pikachu.png/1200px-025Pikachu.png"

    const blockRenderMap = Immutable.Map<DraftBlockType, DraftBlockRenderConfig>({
        'header-two': {
            element: 'h2'
        },
        'unstyled': {
            element: 'div'
        }
    } as any);

    const rawContent = {
        blocks: [
            {
                text: (
                    '1Enter Text Here'
                ),
                type: 'unstyled',
                entityRanges: [{ offset: 0, length: 1, key: 'first' }],
            },
        ],

        entityMap: {
            first: {
                type: 'TOKEN',
                mutability: 'IMMUTABLE',
            }
        },
    };

    const ImageArea = (props:any) => {
        return (
            <div style={{float: 'right'}}>
            <ContentItemImage imageUrl={imageUrl} onChange={(url)=> {
                onChange({
                    imageUrl: url,
                    text: ""
                })
            }} />
            </div>
        );
    };


    function getEntityStrategy(mutability: any) {
        return function (contentBlock: any, callback: any, contentState: any) {
            contentBlock.findEntityRanges(
                (character: any) => {
                    const entityKey = character.getEntity();
                    if (entityKey === null) {
                        return false;
                    }
                    return contentState.getEntity(entityKey).getMutability() === mutability;
                },
                callback
            );
        };
    }

    const decorator = new CompositeDecorator([
        {
            strategy: getEntityStrategy('IMMUTABLE'),
            component: ImageArea,
        },
        {
            strategy: getEntityStrategy('MUTABLE'),
            component: ImageArea,
        },
        {
            strategy: getEntityStrategy('SEGMENTED'),
            component: ImageArea,
        },
    ]);

    const blocks = convertFromRaw(rawContent as any);


    const [editorState, setEditorState] = React.useState<EditorState>(EditorState.createWithContent(blocks, decorator))


    return <>
        <Editor
            blockRenderMap={blockRenderMap as any}
            blockRendererFn={(block) => {
                console.log(block)
            }}
            editorState={editorState} onChange={(state) => {
                setEditorState(state)
            }} />
    </>
}

编辑：

我正在探索在onChange中执行此操作：

 onChange={(state) => {
                const raw = convertToRaw(state.getCurrentContent())
                onChange({
                    imageUrl: imageUrl,
                    text: raw.blocks[0].text
                })

//以某种方式改变状态，然后... setEditorState（状态） }} />

因此，我可以在实体范围更改的地方拦截更改-我想做的是从raw.blocks [0] .text中删除所有实体范围-有没有办法我可以使用draftjs API或我需要使用javascript字符串utils手动删除实体范围吗？

我也不确定如何防止这样做来选择或删除实体范围。

DraftJS-不允许选择，复制或修改实体吗？

0 个答案: