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

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

• Inline editor

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

• Editor with custom event handlers and configuration

                  
  CopyDownload
  <div id="app">
  	<ckeditor @ready="logEvent(&apos;ready&apos;, $event)" @focus="logEvent(&apos;focus&apos;, $event)" @blur="logEvent(&apos;blur&apos;, $event)" @input="logEvent(&apos;input&apos;, $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

                  
  CopyDownload
  <div id="app">
  	<p>
  		<textarea id="editor-editor" class="source-editor" v-model.lazy="editorData"></textarea>
  	</p>
  
  	<ckeditor class="editor-instance" :config="editorConfig" v-model="editorData"></ckeditor>
  
  	<div class="editor-preview">
  		<h2>Rendered content</h2>
  		<div v-html="editorData"></div>
  	</div>
  </div>
  <script>
  	Vue.use( CKEditor );
  
  	new Vue( {
  		el: '#app',
  		data() {
  			return {
  				editorData: '<p>This is a CKEditor 4 WYSIWYG editor instance created with Vue.</p>'
  			}
  		}
  	} );
  </script>