Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/igorxut/vue-ckeditor5
Component CKEditor 5 for Vue 2.
https://github.com/igorxut/vue-ckeditor5
Last synced: 7 days ago
JSON representation
Component CKEditor 5 for Vue 2.
- Host: GitHub
- URL: https://github.com/igorxut/vue-ckeditor5
- Owner: igorxut
- License: mit
- Created: 2018-05-03T08:56:43.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2020-01-27T12:38:21.000Z (almost 5 years ago)
- Last Synced: 2024-10-28T13:39:58.238Z (11 days ago)
- Language: JavaScript
- Size: 1.13 MB
- Stars: 53
- Watchers: 5
- Forks: 22
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-wysiwyg - vue-ckeditor5 - CKEditor 5 for vue. (For Vue)
- awesome-wysiwyg-editors - vue-ckeditor5 - CKEditor 5 用于 Vue。  (基于 Vue)
README
VueCkeditor5
[](https://github.com/igorxut/vue-ckeditor5/blob/master/LICENSE)
[](https://www.npmjs.com/package/vue-ckeditor5)
[](https://github.com/igorxut/vue-ckeditor5/blob/master/dist/vue-ckeditor5.js)
Description
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).