CKEditor 4 WYSIWYG Editor Vue Integration Documentation

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

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

Click the tab below to change an example.

Get Sample Source Code

• Classic editor

  <div id="app">
  	<ckeditor value="<p>This is a CKEditor 4 WYSIWYG editor instance created with ️Vue.</p>"></ckeditor>
  </div>
  
  <script>
  	Vue.use( CKEditor );
  
  	new Vue( {
  		el: '#app'
  	} );
  </script>

• Inline editor

  <div id="app">
  	<ckeditor type="inline" value="<p>This is a CKEditor 4 WYSIWYG editor instance created with ️Vue.</p>"></ckeditor>
  </div>
  
  <script>
  	Vue.use( CKEditor );
  
  	new Vue( {
  		el: '#app'
  	} );
  </script>

• Editor with custom event handlers and configuration

  <div id="app">
  	<ckeditor
  		@ready="logEvent('ready', $event)"
  		@focus="logEvent('focus', $event)"
  		@blur="logEvent('blur', $event)"
  		@input="logEvent('input', $event)"
  
  		:config="editorConfig"
  		:value="editorData"
  	></ckeditor>
  
  	<section>
  		<h3>Events log</h3>
  		<small>To check additional details about every event, consult the console in the browser developer tools.</small>
  		<div class="event-log">
  			<ul>
  				<li v-for="event of events">
  					{{ event.timestamp }} - {{ event.name }}
  				</li>
  			</ul>
  		</div>
  		<button v-on:click="clearEventsLog()">Clear events log</button>
  	</section>
  </div>
  <script>
  	Vue.use( CKEditor );
  
  	new Vue( {
  		el: '#app',
  		data: function() {
  			return {
  				events: [],
  				editorData: 'This is a CKEditor 4 WYSIWYG editor instance created with Vue.',
  				editorConfig: {
  					toolbar: [
  						[ 'Source' ],
  						[ 'Styles', 'Format', 'Font', 'FontSize' ],
  						[ 'Bold', 'Italic' ],
  						[ 'Undo', 'Redo' ],
  						[ 'About' ]
  					]
  				}
  			};
  		},
  		methods: {
  			logEvent: function( eventName, event ) {
  				if ( this.events.length > 19 ) {
  					this.events.pop();
  				}
  
  				const eventData = {
  					name: eventName,
  					timestamp: this.getCurrentTimestamp()
  				}
  
  				this.events.unshift( eventData );
  
  				console.log( eventData.timestamp, eventData.name, event );
  			},
  
  			getCurrentTimestamp: function() {
  				return new Intl.DateTimeFormat( 'en', {
  					hour12: false,
  					hour: '2-digit',
  					minute: '2-digit',
  					second: '2-digit'
  				} ).format( new Date() );
  			},
  
  			clearEventsLog: function() {
  				this.events = [];
  			}
  		}
  	} );
  </script>

• Two-way data binding

  <div id="app">
  	<p>
  		<textarea id="editor-editor" class="source-editor" v-model.lazy="editorData">