Question

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

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

所以，当我搜索其他与此相关的图书馆时，我找到了slatejs。

slatejs有'setKeyGenerator'utils。但是，我找不到有关slatejs的'setKeyGenerator'的任何信息。这个util只是设置如下的函数。

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)来传递我们自己的密钥生成器。这使我们有机会在Editor实例之间创建真正唯一的键。

在导入该组件的父级中，为idFromParentIteration组件的每个实例传递一个不同的PlainText属性，您应该会很好。像这样：

['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中生成自定义键？

2 个答案: