codeslayer1 / react-ckeditor

CKEditor component for React with plugin and custom event listeners support
MIT License
129 stars 34 forks source link

dialogDefinition is not working #73

Closed Aria486 closed 5 years ago

Aria486 commented 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;