如何在 Facebook Draft.js 中使用装饰器创建 Link 实体

Question

我正在使用 Facebook Draft.js，当在文本中检测到有效 url 时，我需要创建一个 LINK 实体。

目前，我正在使用一个装饰器实现一个策略来检测文本中是否有 link，比如 draft-js-linkify-plugin，但我遇到了一些麻烦将该文本修改为不可变的 LINK 实体。

的确，我用编辑器道具装饰，但我不能修改编辑器的状态，所以，应用这个新的 LINK 实体。

装饰者：

const decorator = new CompositeDecorator([{
    strategy: findLinks,
    component: decorateComponentWithProps(Link, {
        getEditorState: this.getEditorState.bind(this),
        setEditorState: this.onChange.bind(this)
    }),
}]);

策略：

function findLinks(contentBlock, callback) {
    const links = linkify.match(contentBlock.getText());
    if (links) {
        links.map(link => callback(link.index, link.lastIndex))
    }
}

组件：

const Link = (props) => {
    const editorState = props.getEditorState();
    const contentState = editorState.getCurrentContent();
    const selectionState = editorState.getSelection();

    const contentStateWithEntity = contentState.createEntity(
        'LINK',
        'IMMUTABLE',
        { url: props.decoratedText }
    );
    const entityKey = contentStateWithEntity.getLastCreatedEntityKey();

    const contentStateWithLink = Modifier.applyEntity(
        contentStateWithEntity,
        selectionState,
        entityKey
    );

    const entity = contentStateWithLink.getEntity(entityKey);
    const { url } = entity.getData();
    const type = entity.getType();

    const newEditorState = EditorState.set(editorState, {
        currentContent: contentStateWithEntity
    });
    props.setEditorState(newEditorState);

    return <a href={url} target="_blank">{url}</a>;
};

我知道 slectionState 或检索文本块并修改它而不是创建新实体时存在问题，但我有点迷茫。我什至使用正确的逻辑来制作这个吗？

感谢您的帮助，

Answer 1

我在 React Draft 中使用装饰器构建 <a> 标签时没有看到针对这个特定问题的解决方案，并且仍然可以在不发生冲突的情况下编辑它们。

但是，这里有两个选择：

当您 select 文本并单击 link 按钮时，创建一个 link 实体因为它在反应草稿示例中有详细说明。
使用装饰器在您的编辑器中显示 link，然后在提交时，通过检索 link 并用 <a> 标签替换它们来编辑您的内容。在所有情况下，我仍然认为您需要为安全问题清理内容服务器端。利用这一点，也许可以缩短您的 links.

第一种解决方案更适合您创建文章或博客内容。第二种在消息系统使用草稿时更方便。

如何在 Facebook Draft.js 中使用装饰器创建 Link 实体

How create a Link entity with decorators in Facebook Draft.js

javascript

facebook

reactjs

draftjs