Как указано выше, всякий раз, когда я набираю что-то в текстовой области CKEditor, другие текстовые области кажутся медленными.У меня есть 3 CKEditors.Я использую эту библиотеку https://www.npmjs.com/package/react-ckeditor-component. Если в одном из текстовых полей есть значения, и я начинаю печатать в другом текстовом поле, текстовые значения начинают становиться шаткими и медленными при вводе.
import CKEditor from "react-ckeditor-component";
onChangeMaintenance(evt){
let maintenanceNewContent = evt.editor.getData();
this.setState({
maintenanceContent: maintenanceNewContent,
checkSaveData: 'true'
})
}
onChangeNotes(evt){
let notesNewContent = evt.editor.getData();
this.setState({
notesContent: notesNewContent,
checkSaveData: 'true'
})
}
onChangeRedFlag(evt){
let redNewContent = evt.editor.getData();
this.setState({
redFlagContent: redNewContent,
checkSaveData: 'true'
})
}
<div className="col-xs-5 col-sm-5 col-md-5 col-lg-5">
<div className="panel panel-default">
<div className="panel-heading panel-heading-custom2">
<h3 className="panel-title"><center>Red Flags</center></h3>
</div>
<CKEditor
activeClass="redflags"
content={this.state.redFlagContent}
events={{
"change": this.onChangeRedFlag
}}
config= {{removeButtons: 'Outdent,Indent,Styles,Undo,Redo,Select,PasteText,PasteFromWord,HiddenField,CreateDiv,Cut,Copy,Paste,Source,Format,Maximize,Anchor,Superscript,Subscript,RemoveFormat,About,Strike,Blockquote,Table,ShowBlocks, Find, specialChars,HorizontalRule,select', height: 120,
removePlugins: 'resize,elementspath,save,image,flash,iframe,link,smiley,tabletools,find,pagebreak,templates,about,maximize,showblocks,newpage,language,scayt,wsc,select,specialchar, magicline',
autoParagraph: false
}}
/>
</div>
<div className="panel panel-default">
<div className="panel-heading panel-heading-custom4">
<h3 className="panel-title"><center>Maintenance Releases</center></h3>
</div>
<CKEditor
activeClass="maintenance"
content={this.state.maintenanceContent}
events={{
"change": this.onChangeMaintenance
}}
config= {{removeButtons: 'Outdent,Indent,Styles,Undo,Redo,Select,PasteText,PasteFromWord,HiddenField,CreateDiv,Cut,Copy,Paste,Source,Format,Maximize,Anchor,Superscript,Subscript,RemoveFormat,About,Strike,Blockquote,Table,ShowBlocks, Find, specialChars,HorizontalRule,select', height: 120,
removePlugins: 'resize,elementspath,save,image,flash,iframe,link,smiley,tabletools,find,pagebreak,templates,about,maximize,showblocks,newpage,language,scayt,wsc,select,specialchar, magicline',
autoParagraph: false
}}
/>
</div>
<div className="panel panel-default">
<div className="panel-heading panel-heading-custom5">
<h3 className="panel-title"><center>Notes</center></h3>
</div>
<CKEditor
activeClass="maintenance"
content={this.state.notesContent}
events={{
"change": this.onChangeNotes
}}
config= {{removeButtons: 'Outdent,Indent,Styles,Undo,Redo,Select,PasteText,PasteFromWord,HiddenField,CreateDiv,Cut,Copy,Paste,Source,Format,Maximize,Anchor,Superscript,Subscript,RemoveFormat,About,Strike,Blockquote,Table,ShowBlocks, Find, specialChars,HorizontalRule,select', height: 120,
removePlugins: 'resize,elementspath,save,image,flash,iframe,link,smiley,tabletools,find,pagebreak,templates,about,maximize,showblocks,newpage,language,scayt,wsc,select,specialchar, magicline',
autoParagraph: false
}}
/>
</div>