我正在将Draftjs与draft-js-plugins-editor一起使用,我在使用两个插件:draft-js-mathjax-plugin和draft-js-mention-plugin
当用户使用'@'提及元素时,我稍后要用值替换所有提及。例如,“您有@A”将替换为“您有300”。我找到并使用了Draft-js building search and replace functionality,该文献已得到很好的记录和解释。 我更改了一些功能以使其更具全局性:
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>
);
}
}
如果我不使用替换功能,则所有内容均会按预期显示,带有正确样式的提及以及数学表达式。
答案 0 :(得分:1)
我找不到合适的解决方案,然后直接在原始Content State上进行手动编辑。
首先,我要遍历所有块,然后遍历此块中的每个实体。我正在手动替换block [i] .text中的文本。然后,我必须比较上一个元素和新元素之间的长度,以更改下一个元素的偏移量。
我正在使用两个数组,一个称为输入,一个称为值。输入必须按长度排序(从高到低),因为如果我们有@AB和@A并以@A开头,则可能会发生冲突。
然后,输入数组中的每个元素必须具有一个“索引”值,该值链接到值数组以正确替换为正确的值。
let instruction = {"blocks":[{"key":"ar0s","text":"Multiply @alpha by @beta \t\t ","type":"unstyled","depth":0,"inlineStyleRanges":[],"entityRanges":[{"offset":9,"length":6,"key":0},{"offset":19,"length":5,"key":1},{"offset":26,"length":2,"key":2}],"data":{}}],"entityMap":{"0":{"type":"mention","mutability":"IMMUTABLE","data":{"mention":{"index":0,"type":"Integer","name":"alpha","min":0,"max":10}}},"1":{"type":"mention","mutability":"IMMUTABLE","data":{"mention":{"index":1,"type":"Integer","name":"beta","min":0,"max":10}}},"2":{"type":"INLINETEX","mutability":"IMMUTABLE","data":{"teX":"\\frac{@alpha}{@beta}","displaystyle":false}}}}
let inputs = [{index:0,name:'alpha'},{index:1,name:'beta'}];
let values = [1,123456];
replace(instruction,inputs,values);
function replace(contentState,inputs,values)
{
instruction.blocks.forEach((block,i) => {
console.log('Block['+i+'] "' + block.text + '"');
let offsetChange = 0;
block.entityRanges.forEach((entity) => {
entity.offset+=offsetChange;
console.log('\n[Entity] offsetChange:' + offsetChange);
inputs.forEach(input => {
if(instruction.entityMap[entity.key].type === 'mention') {
if(input.name === instruction.entityMap[entity.key].data.mention.name)
{
console.log('replace ' + entity.offset + ' ' + entity.length + ' ' + block.text.toString().substr(entity.offset,entity.length));
block.text = block.text.toString().replace(block.text.toString().substr(entity.offset,entity.length),values[input.index])
let newLength = values[input.index].toString().length
console.log('newLength:' +newLength);
offsetChange+= (newLength-entity.length);
entity.length=newLength;
}
}
});
});
});
return instruction;
}
因此它可以满足我的需求。