0

我试图弄清楚如何在 Draftjs 中居中文本块，并尝试了以下方法，即定义 css 样式，然后将它们应用于具有定义类型 CENTER_ALIGN 的块。其他方法包括使用自定义块函数设置块数据，该函数根据存储的数据映射样式。代码中不相关的部分已被省略。我已经在这个问题上苦苦挣扎了大约一个星期，不知道我还能如何尝试解决这个问题。我也不确定我到底做错了什么。请指教。谢谢你。

编辑：意识到“Draft.css”中的默认样式会覆盖您自己的 .css 文件中定义的任何对齐样式。

RTEditor.js

import "./RTEditor.css";
import "draft-js/dist/Draft.css";
import '@draft-js-plugins/alignment/lib/plugin.css';
import "./RTEditor.css";

const focusPlugin = createFocusPlugin()
const alignmentPlugin = createAlignmentPlugin()

const decorator = composeDecorators(
  alignmentPlugin.decorator,
  focusPlugin.decorator
);

const imagePlugin = createImagePlugin({ decorator })

const { AlignmentTool } = alignmentPlugin;

const plugins = [imagePlugin, alignmentPlugin, focusPlugin]

const LEFT_ALIGN = 'LEFT_ALIGN'
const CENTER_ALIGN = 'CENTER_ALIGN'
const RIGHT_ALIGN = 'RIGHT_ALIGN'
const JUSTIFY = 'JUSTIFY'


const customBlockStyleFn = (contentBlock) => {
  const textAlignStyle = contentBlock.getType();
  console.log(textAlignStyle)
  switch (textAlignStyle) {
    case RIGHT_ALIGN:
      return `block-right`;
    case CENTER_ALIGN:
      return `block-center`;
    case LEFT_ALIGN:
      return `block-left`;
    case JUSTIFY:
      return `block-justify`;
    default:
      return null;
  }
}

class RTEditor extends Component {

constructor(props) {
    super(props);
    this.state = {
      editorState: EditorState.createEmpty(),
    };

    this.onChange = this.onChange.bind(this);

    this.onCenterTextPress = this.onCenterTextPress.bind(this);

  }

  componentDidUpdate(prevProps, prevState) {
    if (!prevProps.content && this.props.content) {
      this.setState({
        editorState: EditorState.createWithContent(
          ContentState.createFromText(this.props.content)
        ),
      });
    }
  }
  
  handleKeyCommand(command, editorState) {
    const newState = RichUtils.handleKeyCommand(editorState, command);

    if (newState) {
      this.onChange(newState);
      return "handled";
    }

    return "not-handled";
  }
  
  onToggleBlockPress(event, blockType) {
    event.preventDefault()
    this.onChange(RichUtils.toggleBlockType(this.state.editorState, blockType))
  }
  
  renderAlignCenterButton() {
    let className = this.getActiveBlockClassName(CENTER_ALIGN)
    return (
      <IconButton 
        style={{ backgroundColor: (className === 'active') ? 'gray' : 'transparent' }}
        onMouseDown={(event) => {
          this.onToggleBlockPress(event, CENTER_ALIGN)
          }}>
        <FormatAlignCenter className={className} />
      </IconButton>
    )

  }
  
  getActiveBlockClassName(block) {
    const currentBlockType =    RichUtils.getCurrentBlockType(this.state.editorState);
    return (currentBlockType === block) ? 'active' : ''
  }
  
  render() {
    return (
      <div
        style={{
          flexDirection: "column",
          border: 5,
          borderColor: "grey",
          width: "auto",
          height: "auto",
        }}
      >
        <Toolbar>
          {this.renderAlignCenterButton()}
    
        </Toolbar>
        <Editor
          ref="editor"
          placeholder="Welcome"
          handleKeyCommand={this.handleKeyCommand}
          editorState={this.state.editorState}
          onChange={this.onChange}
          blockStyleFn={customBlockStyleFn}
          plugins={plugins}
        />
      </div>
    );
  }
  
export { RTEditor };

RTEditor.css

div.DraftEditor-root {
    border: 1px solid #000;
    background-color: beige;
    height: 200px;
    overflow-y: auto;
}
div.DraftEditor-editorContainer, div.public-DraftEditor-content {
    height: 100%;
  }

.block-center {
  text-align: center;
}

.block-left {
  text-align: left;
}

.block-right {
  text-align: right;
}

.block-justify {
  text-align: justify;
}

4

0 回答 0