如何在Draft.js中对齐文本

Question

我想知道如何在Draft.js中对齐文本,如下图所示.

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

Answer 1

编辑器组件有一个带有 class 的 div .public-DraftStyleDefault-ltr。这控制您编写的每个段落的文本对齐方式。当您创建更多段落时，会创建更多这样的 div 来包含文本。文本包含在 span 元素中，并且.public-DraftStyleDefault-ltr默认对齐方式为text-align: left。

text-align: left我为、和创建了一些 css 类text-align: center，并将这个基本的 for 循环添加到我的组件中以创建文本对齐按钮。text-align: righttext-align: justify

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 类的名称。

这是一个非常基本的修复，因为这样当您单击右对齐时，整个文档就会右对齐。我计划解决这个问题，所以只有选定的文本对齐，所以应该能够很快更新这个答案。希望它能以某种方式有所帮助