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="customHandler" @focus="customHandler" @blur="customHandler" @input="customHandler" :config="editorConfig" :value="editorData"></ckeditor>
  </div>
  <script>
  	Vue.use( CKEditor );
  
  	new Vue( {
  		el: '#app',
  		data: function() {
  			return {
  				editorData: 'This is a CKEditor 4 instance created with Vue.',
  				editorConfig: {
  					toolbar: [
  						[ 'Source' ],
  						[ 'Styles', 'Format', 'Font', 'FontSize' ],
  						[ 'Bold', 'Italic' ],
  						[ 'Undo', 'Redo' ],
  						[ 'About' ]
  					]
  				}
  			}
  		},
  		methods: {
  			customHandler: function( event ) {
  				console.log( event );
  			}
  		}
  	} );
  </script>

• Two-way data binding

                  
  CopyDownload
  <div id="app">
  	<textarea v-model.lazy="editorData" style="width: 100%"></textarea>
  	<ckeditor v-model="editorData" :config="editorConfig"></ckeditor>
  </div>
  <script>
  	Vue.use( CKEditor );
  
  	new Vue( {
  		el: '#app',
  		data: function() {
  			return {
  				editorData: 'This is a CKEditor 4 instance created with Vue.',
  				editorConfig: {
  					toolbar: [
  						[ 'Source' ],
  						[ 'Styles', 'Format', 'Font', 'FontSize' ],
  						[ 'Bold', 'Italic' ],
  						[ 'Undo', 'Redo' ],
  						[ 'About' ]
  					]
  				}
  			}
  		}
  	} );
  </script>