1

作为我想做的一个例子，在 Draft.js 中，我想允许用户在页面中包含图像的幻灯片，以后可以在外部进行更改。因此，如果在我的应用程序中定义了幻灯片，用户可以选择该幻灯片以放入他们的页面，如果稍后更改图像，那么它们将在页面上自动更新。编辑器中的可视化表示也是一个不错的选择。我要求太多还是在 Draft.js 中这可能？

4

1 回答 1

0

它永远不会失败。我发布了一个问题，几乎立刻我就找到了可以回答我问题的东西。Draft.js 有所谓的“装饰器”，目前在此处记录：https ://draftjs.org/docs/advanced-topics-decorators.html

基本上你会使用函数/组件创建一系列装饰器。战略起作用，成分明显。

const compositeDecorator = new CompositeDecorator([
  {
    strategy: handleStrategy,
    component: HandleSpan,
  },
  {
    strategy: hashtagStrategy,
    component: HashtagSpan, 
  },
]);

可以使用正则表达式定义策略。这使您能够编写自己的语法或使用模板引擎的语法来嵌入小部件。文档中的策略就是一个很好的例子：

// Note: these aren't very good regexes, don't use them!
const HANDLE_REGEX = /\@[\w]+/g;
const HASHTAG_REGEX = /\#[\w\u0590-\u05ff]+/g;

function handleStrategy(contentBlock, callback, contentState) {
  findWithRegex(HANDLE_REGEX, contentBlock, callback);
}

function hashtagStrategy(contentBlock, callback, contentState) {
  findWithRegex(HASHTAG_REGEX, contentBlock, callback);
}

function findWithRegex(regex, contentBlock, callback) {
  const text = contentBlock.getText();
  let matchArr, start;
  while ((matchArr = regex.exec(text)) !== null) {
    start = matchArr.index;
    callback(start, start + matchArr[0].length);
  }
}

然后是组件：

const HandleSpan = (props) => {
  return <span {...props} style={styles.handle}>{props.children}</span>;
};

const HashtagSpan = (props) => {
  return <span {...props} style={styles.hashtag}>{props.children}</span>;
};
于 2017-03-31T00:59:04.303 回答