Question

作为我想要做的一个例子，在Draft.js中，我想让用户在页面中包含一些可以在以后外部更改的图像幻灯片。因此，如果我的应用中定义了幻灯片，则用户可以选择将幻灯片放入其页面中，如果稍后更改了图像，则它们将自动在页面上更新。编辑器中的直观表示也是一个很好的选择。我问得太多了还是在Draft.js中可以吗？

Answer 1

它永远不会失败。我发布了一个问题，几乎立即找到了可以回答我问题的内容。 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>;
};

Draft.js中的自定义可编程小部件（插件）

1 个答案: