VueCkeditor5

Description

Component CKEditor 5 for Vue 2.

Project is outdated. See official release.

Installation

NMP

npm install vue-ckeditor5

Manual

Download file from repository, paste it in your project and insert path to it in your page by code:

<script src="vue-ckeditor5.js"></script>

Usage

How to

You must paste CKEditor's 5 implementations to vue component. You can use even custom build of CKEditor 5.

See examples.

First way - Global

You can register component globaly by plugin (recommended):

import Vue from 'vue'
import ClassicEditor from '@ckeditor/ckeditor5-build-classic'
import VueCkeditor from 'vue-ckeditor5'
 
const options = {
  editors: {
    classic: ClassicEditor,
  },
  name: 'ckeditor'
}
 
Vue.use(VueCkeditor.plugin, options);

Then you can use the component in your template:

<ckeditor type="classic" v-model="value1"></ckeditor>

Plugin options

property	type	required	default	description
editors	Object	true		Map of editors: value - CKEditor 5 implementation key - alias for it (for prop 'type')
name	String	false	'vue-ckeditor'	Name of component.

Second way - Local

You can register component localy:

import Vue from 'vue'
import ClassicEditor from '@ckeditor/ckeditor5-build-classic'
import VueCkeditor from 'vue-ckeditor5'
 
new Vue({
  el: '#app',
  components: {
    'vue-ckeditor': VueCkeditor.component
  },
  data: {
    value1: 'hello',
    value2: 'world',
    editors: {
      classic: ClassicEditor
    }
  },
  template:
  `<vue-ckeditor type="classic" v-model="value1" :editors="editors"></vue-ckeditor>`
})

Component's props

prop	type	required	default	description
config	Object	false	{language:'en'}	Object with config properties for CKEditor 5 instance.
editors	Object	false	{}	Map of editors: value - CKEditor 5 implementation key - alias for it (for prop 'type')
emptyValue		false		Set if you want to change the 'v-model' value of emptiness editor.
readonly	Boolean	false	false	Read-only mode for CKEditor 5 instance.
tag	String	false	div	HTMLElement for rendering.
toolbarContainer	String	false	null	CSS-selector of DOM-element for CKEditor toolbar. The element is searched by Document.querySelector().
type	String	true		Key for CKEditor 5 implementation of 'editors' prop.
value	String	true	''	Value for data bindings. Use 'v-model' for it.

Normal HTML attributes

You can bind normal HTML attributes to component like this (data-api for example):

<vue-ckeditor type="classic" v-model="value" data-api="1"></vue-ckeditor>

Component's events

name	parameters	description
ready(instance)	instance Instance of CKEditor.	Instance of CKEditor is ready.
destroy(instance)	instance Instance of CKEditor.	Instance of CKEditor is destroyed.
input(newValue, instance, eventInfo, batch)	newValue New value of CKEditor's data. instance Instance of CKEditor. eventInfo An object containing information about the fired event. batch The batch that was used in the executed changes block.	Data is changed.

Events from engine.view.document (check example5).

License

MIT