如何解决无法在 Draftjs 编辑器中居中文本块
我试图弄清楚如何在 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;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。