如何从Draft.js
生成的内容的两端修剪空格答案 0 :(得分:0)
也许存在一个更优雅的解决方案,但当我遇到同样的问题时,我用这个代码解决了它:
if(typeof String.prototype.trimLeft !== 'function') {
String.prototype.trimLeft = function() {
return this.replace(/^\s+/,"");
}
}
if(typeof String.prototype.trimRight !== 'function') {
String.prototype.trimRight = function() {
return this.replace(/\s+$/,"");
}
}
我在这里为没有这些方法的浏览器添加trimLeft
和trimRight
方法。
trimContent = () => {
const editorState = this.state.editorState;
let currentContent = this.state.editorState.getCurrentContent();
const firstBlock = currentContent.getBlockMap().first();
const lastBlock = currentContent.getBlockMap().last();
const firstBlockKey = firstBlock.getKey();
const lastBlockKey = lastBlock.getKey();
const firstAndLastBlockIsTheSame = firstBlockKey === lastBlockKey;
const textStart = firstBlock.getText()
const trimmedTextStart = textStart.trimLeft();
const lengthOfTrimmedCharsStart = textStart.length - trimmedTextStart.length;
let newSelection = new SelectionState({
anchorKey: firstBlockKey,
anchorOffset: 0,
focusKey: firstBlockKey,
focusOffset: lengthOfTrimmedCharsStart
});
currentContent = Modifier.replaceText(
currentContent,
newSelection,
'',
)
let newEditorState = EditorState.push(
editorState,
currentContent,
)
let offset = 0;
if (firstAndLastBlockIsTheSame) {
offset = lengthOfTrimmedCharsStart
}
const textEnd = lastBlock.getText()
const trimmedTextEnd = textEnd.trimRight();
const lengthOfTrimmedCharsEnd = textEnd.length - trimmedTextEnd.length
newSelection = new SelectionState({
anchorKey: lastBlockKey,
anchorOffset: trimmedTextEnd.length - offset,
focusKey: lastBlockKey,
focusOffset: textEnd.length - offset
});
currentContent = Modifier.replaceText(
currentContent,
newSelection,
'',
)
newEditorState = EditorState.push(
editorState,
currentContent,
)
this._handleChange(newEditorState);
}
trimContent
方法 - 这里我使用Modifier.replaceText
util来删除空格字符。
工作示例 - https://jsfiddle.net/p5532ddw/
答案 1 :(得分:0)
获取原始数据,然后开始黑客入侵
editorRawData = convertToRaw(contentState);
editorRawData.blocks = editorRawData.blocks.filter(el => el.text);
editorRawData.blocks = editorRawData.blocks.map(el => {
const indexOfFirstChar = el.text.search(/\S/);
if (indexOfFirstChar > 0) {
el.text = el.text.slice(indexOfFirstChar, el.text.length);
el.entityRanges[0].offset = el.entityRanges[0].offset - indexOfFirstChar;
}
return el;
});
答案 2 :(得分:0)
我有多行Draft.js输入,我想在每行两端修剪空白。
我改写了上面的Mikhail解决方案,并创建了执行此操作的函数:
const trimEditorState = (currentEditorState) => {
const currentContent = currentEditorState.getCurrentContent()
const newContent = currentContent.getBlockMap().reduce((accumulator, block) => {
const key = block.getKey()
const text = block.getText()
const trimmedLeft = text.trimLeft()
const trimmedRight = text.trimRight()
const offset = text.length - trimmedLeft.length
const textToReplaceLeft = new SelectionState({
anchorKey: key,
focusKey: key,
anchorOffset: 0,
focusOffset: offset
})
const leftTrimmedContent = Modifier.replaceText(accumulator, textToReplaceLeft, '')
const textToReplacRight = new SelectionState({
anchorKey: key,
focusKey: key,
anchorOffset: trimmedRight.length - offset,
focusOffset: text.length - offset
})
return Modifier.replaceText(leftTrimmedContent, textToReplacRight, '')
}, currentContent)
return EditorState.push(currentEditorState, newContent, 'remove-range')
}
这是一个没有副作用的纯函数:它接收您当前的EditorState
并返回修改后的修剪后的EditorState
。希望这对其他人有帮助!