VueCkeditor5

[![License](https://img.shields.io/github/license/mashape/apistatus.svg)](https://github.com/igorxut/vue-ckeditor5/blob/master/LICENSE) [![NPM version](https://img.shields.io/npm/v/vue-ckeditor5.svg)](https://www.npmjs.com/package/vue-ckeditor5) [![File size](https://img.shields.io/github/size/igorxut/vue-ckeditor5/dist/vue-ckeditor5.js.svg)](https://github.com/igorxut/vue-ckeditor5/blob/master/dist/vue-ckeditor5.js)

Description

Vue 2 CKEditor 5

Component CKEditor 5 for Vue 2.

Project is outdated. See official release.

Installation

NMP

```shell npm install vue-ckeditor5 ```

Manual

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

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):

```javascript 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:

```html ```
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:

```javascript 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: `` }) ```

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):

```html ```

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