如何在Draft.js中对齐文本

Question

我想知道如何在Draft.js中对齐文字，如下图所示。

我已经搜索了几天，但我还没有找到解决方案。

Answer 1

编辑器组件具有一个类为.public-DraftStyleDefault-ltr的div。这将控制您编写的每个段落的文本对齐方式。随着创建更多段落，将创建更多此类div来包含文本。文本被包裹在span元素中，并且.public-DraftStyleDefault-ltr的默认对齐方式为text-align: left。

我为text-align: left，text-align: center，text-align: right和text-align: justify创建了一些CSS类，并将此基本的for循环添加到了用于创建文本对齐按钮的组件中。

const textBlock = document.querySelectorAll(".public-DraftStyleDefault-ltr");
for (let i = 0; i < textBlock.length; i++) {
    textBlock[i].classList.toggle(this.props.style);
}

this.props.style是用于确定所需文本对齐方式的css类的名称。

这是一个非常基本的修复程序，因为当您单击“右对齐”时，整个文档都将右对齐。我正计划对此进行处理，以便仅对齐选定的文本，因此应该能够尽快更新此答案。希望它能有所帮助

Answer 2

我试图做出几乎相同的事情。但是我的麻烦在于text-align属性，该属性已正确设置为阻止跨度，但是.public-DraftStyleDefault-ltr对此没有反应。

因此，我做出了下一个决定，即得到第一个div子对象，并复制其参数：

const paragraphs: any = document.querySelectorAll(".public-DraftStyleDefault-ltr");

for (let i = 0; i < paragraphs.length; i++) {
    const paragraph = paragraphs.item(i);
    if (paragraph) {
        const firstItem = paragraph.querySelectorAll('*').item(0);
        // Apply to the parent the first child style
        paragraph.style.textAlign = firstItem.style.textAlign;
    }
}

Answer 3

阅读源代码后，我找到了方法。使用 blockRenderMap，您可以添加一些自定义块类型，如下所示：

const blockRenderMap: Record<string, DraftBlockRenderConfig> = {
'header-one-right': {
    element: 'h1',
    wrapper: <StyleHOC style={{ ...blockStylesMap['header-one'], display: 'flex', justifyContent: 'flex-end' }} />,
  },
  'header-two-right': {
    element: 'h2',
    wrapper: <StyleHOC style={{ ...blockStylesMap['header-two'], display: 'flex', justifyContent: 'flex-end' }} />,
  },
  'header-three-right': {
    element: 'h3',
    wrapper: <StyleHOC style={{ ...blockStylesMap['header-three'], display: 'flex', justifyContent: 'flex-end' }} />,
  },
  'unstyled-right': {
    element: 'div',
    wrapper: <StyleHOC style={{ ...blockStylesMap['unstyled'], display: 'flex', justifyContent: 'flex-end' }} />,
  },
};

我使用 flex 是为了避免浪费时间去寻找替代内部样式 .public-DraftStyleDefault-ltr 的方法。

StyleHOC 非常简单：

const StyleHOC: React.FC<Props> = ({ style, children }) => {
  const childrenWithStyle = React.Children.map(children, (child) => {
    if (React.isValidElement(child)) {
      return React.cloneElement(child, { style });
    }
    return child;
  });
  
  return <>{childrenWithStyle}</>;
};

然后您可以使用 blockType 切换 RichUtils.toggleBlockType(editorState, blockType)。