Contribute to this guideReport an issue

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="&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
                    <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
                    <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
                    <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>