Skip to content

Commit

Permalink
#83 - Add Ckeditor events
Browse files Browse the repository at this point in the history
  • Loading branch information
@dangvanthanh
dangvanthanh committed Oct 24, 2018
1 parent cf15af1 commit 8477e7b
Show file tree
Hide file tree
Showing 6 changed files with 194 additions and 85 deletions.
41 changes: 36 additions & 5 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,15 @@ Then in your component:
```vue
<template>
<div>
<vue-ckeditor v-model="content" :config="config" @blur="onBlur($event)" @focus="onFocus($event)" />
<vue-ckeditor
v-model="content"
:config="config"
@blur="onBlur($event)"
@focus="onFocus($event)"
@contentDom="onContentDom($event)"
@dialogDefinition="onDialogDefinition($event)"
@fileUploadRequest="onFileUploadRequest($event)"
@fileUploadResponse="onFileUploadResponse($event)" />
</div>
</template>
Expand All @@ -55,11 +63,23 @@ export default {
};
},
methods: {
onBlur(editor) {
console.log(editor);
onBlur(evt) {
console.log(evt);
},
onFocus(editor) {
console.log(editor);
onFocus(evt) {
console.log(evt);
},
onContentDom(evt) {
console.log(evt);
},
onDialogDefinition(evt) {
console.log(evt);
},
onFileUploadRequest(evt) {
console.log(evt);
},
onFileUploadResponse(evt) {
console.log(evt);
}
}
};
Expand All @@ -77,6 +97,17 @@ export default {
| `instanceReadyCallback` | `Function` | Optional function that will be attached to CKEditor instanceReady event. |
| `readOnlyMode` | `Boolean` | Option setReadOnly editor initializes in the proper mode. **Default: false** |

### Events

| Name | Description |
| -------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `blur` | Fired when the editor instance loses the input focus. |
| `focus` | Fired when the editor instance receives the input focus. |
| `contentDom` | Event fired when the editor content (its DOM structure) is ready |
| `dialogDefinition` | Event fired when a dialog definition is about to be used to create a dialog into an editor instance |
| `fileUploadRequest` | Event fired when the [file loader](https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_fileTools_fileLoader.html) should send XHR |
| `fileUploadResponse` | Event fired when the [file loader](https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_fileTools_fileLoader.html) response is received and needs to be parsed |

## Build Setup

You can use [vue-cli](https://github.com/vuejs/vue-cli) with [vue-rollup-boilerplate templates](https://github.com/dangvanthanh/vue-rollup-boilerplate) or [other vue templates](https://github.com/vuejs-templates)
Expand Down
59 changes: 38 additions & 21 deletions dist/vue-ckeditor2.cjs.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -98,16 +98,39 @@ var script = {
this.instance.setData(this.value);
this.instance.on('instanceReady', function() {
_this.instance.setData(_this.value);
});
this.instance.on('change', this.onChange);
this.instance.on('mode', this.onMode);
this.instance.on('blur', this.onBlur);
this.instance.on('focus', this.onFocus);
this.instance.on('fileUploadResponse', function() {
}); // Ckeditor change event

this.instance.on('change', this.onChange); // Ckeditor mode html or source

this.instance.on('mode', this.onMode); // Ckeditor blur event

this.instance.on('blur', function(evt) {
_this.$emit('blur', evt);
}); // Ckeditor focus event

this.instance.on('focus', function(evt) {
_this.$emit('focus', evt);
}); // Ckeditor contentDom event

this.instance.on('contentDom', function(evt) {
_this.$emit('contentDom', evt);
}); // Ckeditor dialog definition event

this.instance.on('dialogDefinition', function(evt) {
_this.$emit('dialogDefinition', evt);
}); // Ckeditor file upload request event

this.instance.on('fileUploadRequest', function(evt) {
_this.$emit('fileUploadRequest', evt);
}); // Ckditor file upload response event

this.instance.on('fileUploadResponse', function(evt) {
setTimeout(function() {
_this.onChange();
}, 0);
});

_this.$emit('fileUploadResponse', evt);
}); // Listen for instanceReady event

if (typeof this.instanceReadyCallback !== 'undefined') {
this.instance.on('instanceReady', this.instanceReadyCallback);
Expand All @@ -132,20 +155,6 @@ var script = {
}
} catch (e) {}
},
onChange: function onChange() {
var html = this.instance.getData();

if (html !== this.value) {
this.$emit('input', html);
this.instanceValue = html;
}
},
onBlur: function onBlur() {
this.$emit('blur', this.instance);
},
onFocus: function onFocus() {
this.$emit('focus', this.instance);
},
onMode: function onMode() {
var _this2 = this;

Expand All @@ -155,6 +164,14 @@ var script = {
_this2.onChange();
});
}
},
onChange: function onChange() {
var html = this.instance.getData();

if (html !== this.value) {
this.$emit('input', html);
this.instanceValue = html;
}
}
}
};
Expand Down
59 changes: 38 additions & 21 deletions dist/vue-ckeditor2.es.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -94,16 +94,39 @@ var script = {
this.instance.setData(this.value);
this.instance.on('instanceReady', function() {
_this.instance.setData(_this.value);
});
this.instance.on('change', this.onChange);
this.instance.on('mode', this.onMode);
this.instance.on('blur', this.onBlur);
this.instance.on('focus', this.onFocus);
this.instance.on('fileUploadResponse', function() {
}); // Ckeditor change event

this.instance.on('change', this.onChange); // Ckeditor mode html or source

this.instance.on('mode', this.onMode); // Ckeditor blur event

this.instance.on('blur', function(evt) {
_this.$emit('blur', evt);
}); // Ckeditor focus event

this.instance.on('focus', function(evt) {
_this.$emit('focus', evt);
}); // Ckeditor contentDom event

this.instance.on('contentDom', function(evt) {
_this.$emit('contentDom', evt);
}); // Ckeditor dialog definition event

this.instance.on('dialogDefinition', function(evt) {
_this.$emit('dialogDefinition', evt);
}); // Ckeditor file upload request event

this.instance.on('fileUploadRequest', function(evt) {
_this.$emit('fileUploadRequest', evt);
}); // Ckditor file upload response event

this.instance.on('fileUploadResponse', function(evt) {
setTimeout(function() {
_this.onChange();
}, 0);
});

_this.$emit('fileUploadResponse', evt);
}); // Listen for instanceReady event

if (typeof this.instanceReadyCallback !== 'undefined') {
this.instance.on('instanceReady', this.instanceReadyCallback);
Expand All @@ -128,20 +151,6 @@ var script = {
}
} catch (e) {}
},
onChange: function onChange() {
var html = this.instance.getData();

if (html !== this.value) {
this.$emit('input', html);
this.instanceValue = html;
}
},
onBlur: function onBlur() {
this.$emit('blur', this.instance);
},
onFocus: function onFocus() {
this.$emit('focus', this.instance);
},
onMode: function onMode() {
var _this2 = this;

Expand All @@ -151,6 +160,14 @@ var script = {
_this2.onChange();
});
}
},
onChange: function onChange() {
var html = this.instance.getData();

if (html !== this.value) {
this.$emit('input', html);
this.instanceValue = html;
}
}
}
};
Expand Down
59 changes: 38 additions & 21 deletions dist/vue-ckeditor2.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -103,16 +103,39 @@
this.instance.setData(this.value);
this.instance.on('instanceReady', function() {
_this.instance.setData(_this.value);
});
this.instance.on('change', this.onChange);
this.instance.on('mode', this.onMode);
this.instance.on('blur', this.onBlur);
this.instance.on('focus', this.onFocus);
this.instance.on('fileUploadResponse', function() {
}); // Ckeditor change event

this.instance.on('change', this.onChange); // Ckeditor mode html or source

this.instance.on('mode', this.onMode); // Ckeditor blur event

this.instance.on('blur', function(evt) {
_this.$emit('blur', evt);
}); // Ckeditor focus event

this.instance.on('focus', function(evt) {
_this.$emit('focus', evt);
}); // Ckeditor contentDom event

this.instance.on('contentDom', function(evt) {
_this.$emit('contentDom', evt);
}); // Ckeditor dialog definition event

this.instance.on('dialogDefinition', function(evt) {
_this.$emit('dialogDefinition', evt);
}); // Ckeditor file upload request event

this.instance.on('fileUploadRequest', function(evt) {
_this.$emit('fileUploadRequest', evt);
}); // Ckditor file upload response event

this.instance.on('fileUploadResponse', function(evt) {
setTimeout(function() {
_this.onChange();
}, 0);
});

_this.$emit('fileUploadResponse', evt);
}); // Listen for instanceReady event

if (typeof this.instanceReadyCallback !== 'undefined') {
this.instance.on('instanceReady', this.instanceReadyCallback);
Expand All @@ -137,20 +160,6 @@
}
} catch (e) {}
},
onChange: function onChange() {
var html = this.instance.getData();

if (html !== this.value) {
this.$emit('input', html);
this.instanceValue = html;
}
},
onBlur: function onBlur() {
this.$emit('blur', this.instance);
},
onFocus: function onFocus() {
this.$emit('focus', this.instance);
},
onMode: function onMode() {
var _this2 = this;

Expand All @@ -160,6 +169,14 @@
_this2.onChange();
});
}
},
onChange: function onChange() {
var html = this.instance.getData();

if (html !== this.value) {
this.$emit('input', html);
this.instanceValue = html;
}
}
}
};
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "vue-ckeditor2",
"version": "2.0.10",
"version": "2.1.0",
"description": "Ckeditor 4 using with Vue.js",
"author": "Dang Van Thanh <dangvanthanh@dangthanh.org>",
"main": "dist/vue-ckeditor2.cjs.js",
Expand Down

0 comments on commit 8477e7b

Please sign in to comment.