README

CKEditor 4 WYSIWYG editor Advanced component for React

This is Un-Official CKEditor 4 WYSIWYG editor Advanced component for React. CKEditor 4 screenshot

Features We Included

1.official ckeditor full all plugins.

Our Custome Features We Included

1.ckeditor background color change.

Supported official ckeditor plugins list in this package.

'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript'
'TextColor', 'BGColor'
'Maximize', 'ShowBlocks'
'Source', '-', 'Save', 'NewPage', 'Preview', 'Print', '-', 'Templates'
'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo'
Find', 'Replace', '-', 'SelectAll', '-', 'Scayt'
'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'
'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'BidiLtr', 'BidiRtl', 'Language'
'Link', 'Unlink', 'Anchor'
'Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak', 'Iframe'

Installation

 npm install ckeditor4-react-advanced

Usage

import CKEditor from 'ckeditor4-react-advanced';


<CKEditor

data={this.state.mytext}
onChange={this.onEditorChange}
config={ {
toolbar: [
['Bold', 'Italic','Underline', 'Link','Unlink','Image'],
['NumberedList', 'BulletedList', 'list', 'indent', 'blocks' ,'Paragraph' ]
],

width: '600px',
height: '350px',

}

}
/>

For Change ckeditor background color

    import CKEditor from 'ckeditor4-react-advanced';
    CKEditor.editorbgcolor = 'yellow';  //you can also use htmlcolor code like #fff000

        
            
     <CKEditor
           data={this.state.mytext}
            onChange={this.onEditorChange}
            config={ {
            toolbar: [
            ['Bold', 'Italic','Underline', 'Link','Unlink','Image'],
            ['NumberedList', 'BulletedList', 'list', 'indent', 'blocks' ,'Paragraph' ]
            ],

            width: '600px',
            height: '350px',

            }

            }
            />

Output

enter image description here