如何在Draft.js中对齐文本

Question

我想知道如何在Draft.js中对齐文本，就像下面的图片一样。

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

- zhuscat

---

你有没有查看过 https://facebook.github.io/draft-js/docs/advanced-topics-block-styling.html？ - NooBskie

是的，但我仍然不知道如何确切地做到这一点... 因为每种块类型都可以左对齐、居中或右对齐。 - zhuscat

你需要动态块样式，但是目前草稿不支持。请查看我的答案：https://dev59.com/bprga4cB1Zd3GeqPiy31 - Jiang YD

Answer 1

要更改區塊對齊方式，您可以：

1- 設置對齊數據

    const modifiedBlockState = Modifier.setBlockData(editorState.getCurrentContent(),
    editorState.getSelection(),Map({align:'align-center'}));
    setEditorState(EditorState.push(modifiedBlockState,'change-block-data'));

2- 在样式函数中使用它

/* 
JSX

blockStyleFn={ block => block.getData().get('align')
this will return 'align-center|left|right' which will be assigned as a classname
*/
<Editor blockStyleFn={ block => block.getData().get('align')} .../>
//CSS 
.align-center div{
    text-align: center;
}
.align-right div{
    text-align: right;
}
.....

- Asim

Answer 2

阅读源代码后，我发现了一种方法。使用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}</>;
};

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

- Window0006

Answer 3

我尝试做类似的事情。但是我的问题在于文本对齐属性，它被正确设置为块级内联元素，但是.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;
    }
}

- strangedk

Answer 4

编辑器组件具有带有类.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类名称。

这是一个相当基本的修复，因为这样当您点击右对齐时，整个文档都会右对齐。我计划改进它，使只有所选文本对齐，因此很快就能更新这个答案。希望它在某种程度上有所帮助。

- PumpkinBreath