如何在slatejs中生成自定义密钥？

Question

我正在尝试使所见即所得编辑器可以对所选文本进行注释。

首先，我使用了Draft.js。但是不适合使用键指向注释文本，因为Draft.js的实体键是在复制选择时启动的。

因此，我在搜索与此相关的其他库时找到了 slatejs。

slatejs 有 'setKeyGenerator' 实用程序。但是，我找不到任何关于 'setKeyGenerator' of slatejs 的信息。此实用程序只是设置功能，如下所示。

function setKeyGenerator(func) {
  generate = func;
}

而且我不知道如何使用此函数生成密钥。

那么，有谁知道如何使用这个功能或者对注释所选文本有什么想法吗？

Answer 1

如果您尝试生成一个键来引用元素（块），您可以执行以下操作：

// A key to reference to block by (you should make it more unique than `Math.random()`)
var uniqueKey = Math.random();

// Insert a block with a unique key
var newState = this.state
    .transform()
    .insertBlock({
        type: 'some-block-type',
        data: {
            uniqueKey: uniqueKey
        },
    })
    .apply();

// Get the block's unique Slate key (used internally)
var blockKey;
var { document } = self.state;
document.nodes.some(function(node) {
    if (node.data.get('uniqueKey') == uniqueKey) {
        blockKey = node.key;
    }
});

// Update data on the block, using it's key to find it.
newState = newState
    .transform()
    .setNodeByKey(blockKey, {
        data: {
            // Define any data parameters you want attached to the block.
            someNewKey: 'some new value!'
        },
    })
    .apply();

这将允许您在插入块上设置唯一键，然后获取块的实际 SlateJs key 并用它更新块。

Answer 2

Slate 提供了一个 KeyUtils.setGenerator(myKeygenFunction) 来传递我们自己的密钥生成器。这使我们有机会跨编辑器实例创建真正唯一的键。

在导入此组件的父级中，为 PlainText 组件的每个实例传递一个不同的 idFromParentIteration 道具，你应该没问题。像这样：

['first-editor', 'second-editor'].map((name, idx) => <PlainText idFromParentIteration={name + idx} />)

这是一个带有自定义密钥生成器的完整示例。

import React from "react";
import Plain from "slate-plain-serializer";
import { KeyUtils } from 'slate';
import { Editor } from "slate-react";

const initialValue = Plain.deserialize(
  "This is editable plain text, just like a <textarea>!"
);

class PlainText extends React.Component {
  constructor(props) {
    super(props);
    let key = 0;
    const keygen = () => {
      key += 1;
      return props.idFromParentIteration + key; // custom keys
    };
    KeyUtils.setGenerator(keygen);
  }
  render() {
    return (
      <Editor
        placeholder="Enter some plain text..."
        defaultValue={initialValue}
      />
    );
  }
}

export default PlainText;

如何在slatejs中生成自定义密钥？

How to generate the customized key in slatejs?

wysiwyg

annotations

reactjs

draftjs

slate.js