Closed Aria486 closed 5 years ago
import React, { Component } from 'react'; import CKEditor from 'react-ckeditor-component'; import PropTypes from 'prop-types'; import { ROUTE_LOCAL_CKEDITOR } from '../../../../utils/constants'; import { isTabletDevice } from '../../../../utils/helper'; class CCKEditor extends Component { constructor(props) { super(props); this.handleOnChange = this.handleOnChange.bind(this); this.hideToolbar = this.hideToolbar.bind(this); this.linkDialogEdit = this.linkDialogEdit.bind(this); } // dialogDefinition is not working linkDialogEdit(ev) { console.log(ev); } render() { const { parentRef } = this.props; const events = isTabletDevice() ? { change: this.handleOnChange, instanceReady: this.hideToolbar, dialogDefinition: this.dialog } : { change: this.handleOnChange, dialogDefinition: this.linkDialogEdit }; return ( <CKEditor content={this.getContent()} scriptUrl={ROUTE_LOCAL_CKEDITOR} config={{ toolbar: [ { name: 'action', items: ['Undo', 'Redo'] }, { name: 'font', items: ['FontSize', 'TextColor', 'BGColor'] }, { name: 'style', items: ['Bold', 'Italic', 'Underline', 'Strike'] }, { name: 'link', items: ['Link', 'Unlink'] }, { name: 'RemoveFormat', items: ['RemoveFormat'] }, ], linkShowAdvancedTab: false, linkShowTargetTab: false, autolink_commitKeystrokes: [], language: 'ja', fontSize_defaultLabel: '16', removePlugins: 'elementspath', contentsCss: './customContents.css', }} events={events} ref={parentRef} /> ); } } CCKEditor.defaultProps = { value: '', onChange: null, }; CCKEditor.propTypes = { value: PropTypes.string, parentRef: PropTypes.object.isRequired, onChange: PropTypes.func, }; export default CCKEditor;