import React from 'react' ; import { getLocale } from 'umi' ; import request from '@/utils/request' ; import { CKEditor } from '@ckeditor/ckeditor5-react' ; import DecoupledEditor from '@ckeditor/ckeditor5-build-decoupled-document' ; import '@ckeditor/ckeditor5-build-decoupled-document/build/translations/zh-cn' ; import styles from './index.less' ; export const languageLabels = { 'zh-CN' : 'zh-cn' , 'zh-TW' : 'zh' , 'en-US' : 'en-us' , } ; export const CKEditorConfig = { toolbar : [ 'heading' , '|' , 'fontfamily' , 'fontsize' , 'fontColor' , 'fontBackgroundColor' , '|' , 'bold' , 'italic' , 'underline' , 'strikethrough' , '|' , 'alignment' , '|' , 'numberedList' , 'bulletedList' , '|' , 'indent' , 'outdent' , '|' , 'link' , 'blockquote' , 'imageUpload' , 'insertTable' , 'mediaEmbed' , '|' , 'undo' , 'redo' , ] , language : languageLabels [ getLocale ( ) ] , } ; export interface CKEditorProps { value : string ; toolbars ? : string [ ] ; onChange ? : ( data : string , editor : any , event : any ) => void ; onBlur ? : ( event : any , editor : any ) => void ; onFocus ? : ( event : any , editor : any ) => void ; onReady ? : ( editor : any ) => void ; } const Editor = props => { const { toolbar , ... config } = CKEditorConfig ; const { value = '' , toolbars = toolbar , onChange , onBlur , onFocus , onReady , } = props ; let thisEditor = null ; return ( < div className = { styles [ 'document-editor' ] } > < CKEditor editor = { DecoupledEditor } config = { { toolbar : toolbars , ... config , } } data = { value } onReady = { ( editor ) => { editor . ui . getEditableElement ( ) . parentElement . insertBefore ( editor . ui . view . toolbar . element , editor . ui . getEditableElement ( ) ) ; editor . plugins . get ( 'FileRepository' ) . createUploadAdapter = ( loader ) => { return { upload : async ( ) => { return await loader . file . then ( ( f ) => { let param = new FormData ( ) ; param . append ( 'file' , f ) ; return new Promise ( ( resolve , reject ) => { request ( '/uploads' , { headers : { 'Content-Type' : 'multipart/form-data' } , method : 'POST' , data : param , } ) . then ( res => { const { data } = res ; resolve ( { default : data . url || '' , } ) ; } ) . catch ( err => { console . log ( err ) ; reject ( err ) ; } ) ; } ) ; } ) ; } , } ; } ; thisEditor = editor ; if ( onReady ) { onReady ( editor ) ; } } } onError = { ( { willEditorRestart } ) => { if ( willEditorRestart ) { thisEditor . ui . view . toolbar . element . remove ( ) ; } } } onChange = { ( event , editor ) => { const data = editor . getData ( ) ; if ( onChange ) { onChange ( data , editor , event ) ; } } } onBlur = { ( event , editor ) => { if ( onBlur ) { onBlur ( event , editor ) ; } } } onFocus = { ( event , editor ) => { if ( onFocus ) { onFocus ( event , editor ) ; } } } /> < /div>); } ; export default Editor ;