SHARE
TWEET

Untitled

a guest Oct 14th, 2019 90 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React from 'react';
  2. import PropTypes from 'prop-types';
  3. import CKEditor from '@ckeditor/ckeditor5-react';
  4. import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
  5. import styled from 'styled-components';
  6.  
  7. const Wrapper = styled.div`
  8.   .ck-editor__main {
  9.     min-height: 200px;
  10.     > div {
  11.       min-height: 200px;
  12.     }
  13.   }
  14. `;
  15.  
  16. const Editor = ({ onChange, name, value }) => {
  17.   return (
  18.     <Wrapper>
  19.       <CKEditor
  20.         editor={ClassicEditor}
  21.         data={value}
  22.         onChange={(event, editor) => {
  23.           const data = editor.getData();
  24.           onChange({ target: { name, value: data } });
  25.         }}
  26.       />
  27.     </Wrapper>
  28.   );
  29. };
  30.  
  31. Editor.propTypes = {
  32.   onChange: PropTypes.func.isRequired,
  33.   name: PropTypes.string.isRequired,
  34.   value: PropTypes.string.isRequired,
  35. };
  36.  
  37. export default Editor;
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top