我将 Draftjs 与 Draft-js-plugins-editor 一起使用，我正在使用两个插件：draft-js-mathjax-plugin和draft-js-mention-plugin
当用户使用“@”提及元素时，我想稍后用值替换所有提及。例如，“你有@A”将被“你有 300”替换。我找到并使用了Draft-js 构建搜索和替换功能，该功能有很好的文档和解释。我更改了一些函数以使它们更具全局性：
function findWithRegex (regex, contentBlock, callback) {
const text = contentBlock.getText();
let matchArr, start, end;
while ((matchArr = regex.exec(text)) !== null) {
start = matchArr.index;
end = start + matchArr[0].length;
callback(start, end);
}
}
function Replace (editorState,search,replace) {
const regex = new RegExp(search, 'g');
const selectionsToReplace = [];
const blockMap = editorState.getCurrentContent().getBlockMap();
blockMap.forEach((contentBlock,i) => (
findWithRegex(regex, contentBlock, (start, end) => {
const blockKey = contentBlock.getKey();
const blockSelection = SelectionState
.createEmpty(blockKey)
.merge({
anchorOffset: start,
focusOffset: end,
});
selectionsToReplace.push(blockSelection)
})
));
let contentState = editorState.getCurrentContent();
selectionsToReplace.forEach((selectionState,i) => {
contentState = Modifier.replaceText(
contentState,
selectionState,
replace
)
});
return EditorState.push(
editorState,
contentState,
);
}
这单独运行良好，但是当我使用 mathjax-plugin 放置数学表达式，然后我使用该Replace函数时，所有数学内容都消失了......
我知道在 replaceText 函数的定义中我们可以插入 inlineStyle，但我没有找到任何“提取”样式的方法。我尝试使用getEntityAt,和其他功能findStyleRanges，findEntityRanges但我无法让它们做我想做的事......
这是我的反应组件：
import React, { Component } from 'react';
import {EditorState, SelectionState, Modifier, convertFromRaw, convertToRaw} from 'draft-js';
import Editor from 'draft-js-plugins-editor';
import createMathjaxPlugin from 'draft-js-mathjax-plugin';
import createMentionPlugin, { defaultSuggestionsFilter } from 'draft-js-mention-plugin';
export default class EditorRplace extends Component {
constructor(props) {
super(props);
this.mentionPlugin = createMentionPlugin({
entityMutability: 'IMMUTABLE',
mentionPrefix: '@'
});
//We recover the data from the props
let JSONContentState = JSON.parse(this.props.instruction);
let inputs = this.props.inputs;
let values = this.props.values;
this.state = {
editorState: EditorState.createWithContent(convertFromRaw(JSONContentState)),
plugins:[this.mentionPlugin,createMathjaxPlugin({setReadOnly:this.props.isReadOnly})],
trigger:this.props.trigger,
inputs:inputs,
values:values,
};
}
componentDidMount() {
this.setState({
editorState:onReplace(this.state.editorState,'A','B')
})
}
onChange = (editorState) => {
this.setState({
editorState:editorState,
})
};
render() {
return (
<div>
<Editor
readOnly={true}
editorState={this.state.editorState}
plugins={this.state.plugins}
onChange={this.onChange}
/>
</div>
);
}
}
如果我没有使用替换功能，一切都会按预期显示，以正确的风格提及，以及数学表达式。