Laggy CKEditors, я сделал несколько из них на своей странице, и кажется, запаздывает при вводе в React.js - PullRequest
0 голосов
/ 18 декабря 2018

Как указано выше, всякий раз, когда я набираю что-то в текстовой области 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...