Contribute to this guideReport an issue

CKEditor 4 WYSIWYG Editor React Integration Documentation

The React integration allows you to implement CKEditor 4 as a React component, using the <CKEditor /> JSX tag.

The following examples showcase the most important features of the CKEditor 4 WYSIWYG editor React integration.

Click the tab below to change an example.

Get Sample Source Code

  • Classic editor
                    import ReactDOM from 'react-dom';
    import CKEditor from 'ckeditor4-react';
    
    ReactDOM.render(
    	<CKEditor data="<p>This is a CKEditor 4 WYSIWYG editor instance created by ️⚛️ React.</p>" />,
    	document.getElementById( 'app' )
    );
  • Inline editor
                    import ReactDOM from 'react-dom';
    import CKEditor from 'ckeditor4-react';
    
    ReactDOM.render(
    	<CKEditor type="inline" data="<p>This is a CKEditor 4 WYSIWYG editor instance created by ️⚛️ React.</p>" />,
    	document.getElementById( 'app' )
    );
  • Editor with custom event handlers and configuration
                    import React, { Component } from 'react';
    import ReactDOM from 'react-dom';
    import CKEditor from 'ckeditor4-react';
    
    class ConfigEvents extends Component {
    	constructor( props ) {
    		super( props );
    
    		this.state = {
    			events: []
    		};
    
    		this.logEvent = this.logEvent.bind( this );
    		this.clearEvents = this.clearEvents.bind( this );
    	}
    
    	logEvent( event ) {
    		event.timestamp = new Intl.DateTimeFormat( 'en', {
    			hour12: false,
    			hour: '2-digit',
    			minute: '2-digit',
    			second: '2-digit'
    		} ).format( new Date() );
    
    		console.log( event.timestamp, event.name, event.data || 'No additional data was provided' );
    
    		this.setState( {
    			events: [ event, ...this.state.events ]
    		} );
    	}
    
    	clearEvents() {
    		this.setState( {
    			events: []
    		} );
    	}
    
    	render() {
    		return (
    			<div>
    				<h2>WYSIWYG editor with custom event handlers and configuration</h2>
    				<p>
    					Editors created with the CKEditior 4 React component are highly customizable. It is possible to overwrite every configuration setting using the <code>config</code> property and passing an object containing the configuration to it.
    				</p>
    				<p>
    					Additionally, the CKEditor 4 WYSIWYG editor component for React allows you to bind any event handler using properties with names starting with <code>on</code>, followed by the name of the event with the first letter capitalized. The following example shows how to bind several common CKEditor 4 events.
    				</p>
    				<CKEditor
    					data="This is a CKEditor 4 WYSIWYG editor instance created by ️⚛️ React."
    					config={{
    						toolbar: [
    							[ 'Source' ],
    							[ 'Styles', 'Format', 'Font', 'FontSize' ],
    							[ 'Bold', 'Italic' ],
    							[ 'Undo', 'Redo' ],
    							[ 'About' ]
    						]
    					}}
    
    					onFocus={this.logEvent}
    					onBlur={this.logEvent}
    					onChange={this.logEvent}
    					onSelectionChange={this.logEvent} />
    					<h3>Events Log</h3>
    					<small>To check additional details about every event, consult the console in the browser developer tools.</small>
    					<EventLog stream={this.state.events} />
    					<button onClick={this.clearEvents}>Clear events log</button>
    			</div>
    		);
    	}
    }
    const EventLog = ( { stream } ) => {
    	return (
    		<div className="event-log">
    			<ul className="event-log__events">
    				{
    					stream.map( event => {
    						return (
    							<li className="event-log__event">
    								<Event data={event} />
    							</li>
    						)
    					} )
    				}
    			</ul>
    		</div>
    	);
    }
    const Event = ( { data: { name, timestamp } } ) => {
    	return (
    		<>
    			{timestamp} – {name}
    		</>
    	);
    }
    
    ReactDOM.render( <ConfigEvents />, document.getElementById( 'app' ) );
  • Two-way data binding
                    import React, { Component } from 'react';
    import ReactDOM from 'react-dom';
    import CKEditor from 'ckeditor4-react';
    
    class TwoWayBinding extends Component {
    	constructor( props ) {
    		super( props );
    
    		this.state = {
    			data: '<p>This is a CKEditor 4 WYSIWYG editor instance created by ️⚛️ React.</p>'
    		};
    
    		this.handleChange = this.handleChange.bind( this );
    		this.onEditorChange = this.onEditorChange.bind( this );
    	}
    
    	onEditorChange( evt ) {
    		this.setState( {
    			data: evt.editor.getData()
    		} );
    	}
    
    	handleChange( changeEvent ) {
    		this.setState( {
    			data: changeEvent.target.value
    		} );
    	}
    
    	render() {
    		return (
    			<div>
    				<SourceEditor data={this.state.data} handler={this.handleChange} />
    				<div className="editor-instance">
    					<CKEditor
    						data={this.state.data}
    						onChange={this.onEditorChange}
    					/>
    				</div>
    				<EditorPreview data={this.state.data} />
    			</div>
    		);
    	}
    }
    class EditorPreview extends Component {
    	render() {
    		return (
    			<div className="editor-preview">
    				<h2>Rendered content</h2>
    				<div dangerouslySetInnerHTML={{ __html: this.props.data }}></div>
    			</div>
    		);
    	}
    }
    class SourceEditor extends Component {
    	constructor( props ) {
    		super( props );
    
    		this.state = {
    			focused: false
    		};
    	}
    
    	render() {
    		var textareaValue = {};
    
    		if ( !this.state.focused ) {
    			textareaValue = {
    				value: this.props.data
    			};
    		}
    
    		return (
    			<>
    				<p>
    					<label htmlFor="editor-editor">The editor content:</label>
    				</p>
    				<p>
    					<textarea
    						id="editor-editor"
    						className="binding-editor"
    						{...textareaValue}
    						onChange={this.props.handler}
    						onFocus={ () => { this.setState( {
    								focused: true
    							} );
    						}}
    						onBlur={ () => { this.setState( {
    								focused: false
    							} );
    						}}
    					/>
    				</p>
    			</>
    		);
    	}
    }
    
    ReactDOM.render( <TwoWayBinding />, document.getElementById( 'app' ) );