This package has been deprecated

Author message:

Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

ckeditor4-react-advanced

CKEditor 4 WYSIWYG editor Advanced component for React

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

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

Documentation and examples

See the official CKEditor 4 WYSIWYG Editor React Integration article in the CKEditor 4 documentation.

You can also check out CKEditor 4 WYSIWYG Editor React Integration example in CKEditor 4 Examples.