工作原理:用户按下空格键后,将查询特定单词的Draft-JS文本内容。然后,该单词的所有实例都会被包裹在标签中。文本包装完成后,HTML将被转换回来,并更新Draft-JS编辑器状态。
const convertedFromHTML= convertFromHTML(newHTML);
const editorState = this.state.editorState;
// Set Editor and Content States
const newContentState = ContentState.createFromBlockArray(
convertedFromHTML.contentBlocks,
convertedFromHTML.entityMap
);
const nextEditorState = EditorState.push(
editorState,
newContentState,
'insert-text'
);
this.setState({
editorState: nextEditorState
});
块渲染映射:
const blockRenderMap = Immutable.Map({
'Atomic': {
element: 'Atomic' ,
wrapper: <GoogleCustomBlock />
}
});
const myBlockStyleFn = (contentBlock) => {
const type = contentBlock.getType();
switch (type) {
case 'atomic': {
return 'GoogleCustomBlock';
}
}
自定义块组件:
// React Components
import React, { Component } from 'react';
class GoogleCustomBlock extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div className='GoogleCustomBlock'>
{this.props.children}
</div>
);
}
}
导出默认的 GoogleCustomBlock;
问题: 当用户按下空格键时,出现此功能。文本被包装并正确的块添加到DOM中。我遇到了以下两个困难:
- 我需要在文本结束后插入一个空格。
- 光标跳回到文档的开头,但仍停留在通过元素创建的新块内。我需要它在新块外继续编辑并在文本末尾。
我已经在网上搜索了一圈,但没有运气,任何帮助都将不胜感激。
谢谢!