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