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.