当将来自单词或其他来源的文本粘贴到draftjs中时,格式随之而来,我尝试像这样剥离样式数据:
onChange={(newEditorState) => {
const raw = convertToRaw(newEditorState.getCurrentContent())
for (let i = 0; i < raw.blocks.length; i++){
raw.blocks[i].type = "unstyled"
}
let newContent = convertFromRaw(raw)
newEditorState
const newState = EditorState.push(state, newContent, "change-block-type")
setState(newState)
}} />
除了输入最终在输入之后被反转之外,这还很有效。
答案 0 :(得分:1)
您正在寻找stripPastedStyles
option:
设置是否从粘贴的内容中删除除明文以外的所有信息。
如果您的编辑器不支持丰富样式,则应使用此样式。
默认值为
import { Component , ViewChild } from '@angular/core'; import {CdkDragDrop, moveItemInArray, transferArrayItem, CdkDragHandle} from '@angular/cdk/drag-drop'; import { MatTable } from '@angular/material'; @Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent { @ViewChild('table') table: MatTable<PeriodicElement>; dataSource = ELEMENT_DATA; displayedColumns = ['id', 'name', 'weight', 'descriptions']; spans = []; tempRowId = null; tempRowCount = null; constructor() { this.cacheSpan('Priority', d => d.id); this.cacheSpan('Name', d => d.name); this.cacheSpan('Weight', d => d.weight); } /** * Evaluated and store an evaluation of the rowspan for each row. * The key determines the column it affects, and the accessor determines the * value that should be checked for spanning. */ cacheSpan(key, accessor) { for (let i = 0; i < DATA.length;) { let currentValue = accessor(DATA[i]); let count = 1; // Iterate through the remaining rows to see how many match // the current value as retrieved through the accessor. for (let j = i + 1; j < DATA.length; j++) { if (currentValue != accessor(DATA[j])) { break; } count++; } if (!this.spans[i]) { this.spans[i] = {}; } // Store the number of similar values that were found (the span) // and skip i to the next unique row. this.spans[i][key] = count; i += count; } } getRowSpan(col, index) { return this.spans[index] && this.spans[index][col]; } dropTable(event: CdkDragDrop<PeriodicElement[]>) { const prevIndex = this.dataSource.findIndex((d) => d === event.item.data); moveItemInArray(this.dataSource, prevIndex, event.currentIndex); this.table.renderRows(); } } export interface PeriodicElement { id: number; name: string; weight: number; descriptions: string[]; } const originalData = [ { id: 1, name: 'Hydrogen', weight: 1.0079, descriptions: ['row1', 'row2'] }, { id: 2, name: 'Helium', weight: 4.0026, descriptions: ['row1', 'row2', 'row3'] }, { id: 3, name: 'Lithium', weight: 6.941, descriptions: ['row1', 'row2'] }, { id: 4, name: 'Beryllium', weight: 9.0122, descriptions: ['row1', 'row2', 'row3'] }, { id: 5, name: 'Boron', weight: 10.811, descriptions: ['row1'] }, { id: 6, name: 'Carbon', weight: 12.0107, descriptions: ['row1', 'row2', 'row3'] }, { id: 7, name: 'Nitrogen', weight: 14.0067, descriptions: ['row1'] }, { id: 8, name: 'Oxygen', weight: 15.9994, descriptions: ['row1'] }, { id: 9, name: 'Fluorine', weight: 18.9984, descriptions: ['row1', 'row2', 'row3'] }, { id: 10, name: 'Neon', weight: 20.1797, descriptions: ['row1', 'row2', 'row3'] }, ] const DATA = originalData.reduce((current, next) => { next.descriptions.forEach(b => { current.push({ id: next.id, name: next.name, weight: next.weight, descriptions: b }) }); return current; }, []); console.log(DATA) const ELEMENT_DATA: PeriodicElement[] = DATA;
。