vueckeditor是一个用于Vuejs2的Ckeditor编辑器

# vue-ckeditor > Ckeditor using for Vue.js 2  ## Requirements - [Ckeditor](http://ckeditor.com/) >= 4 - [Vue.js](http://vuejs.org/) >= 2 ## Install ### CDN ```html <script src="https://unpkg.com/vue-ckeditor2"></script> ``` ### NPM ``` $ npm install vue-ckeditor2 --save ``` ## Usage > This document applies to v2.0+. If you are looking for older versions, docs are [here](https://github.com/dangvanthanh/vue-ckeditor2/wiki/Getting-Started) ### Component Then in your component: ```vue <template> <div> <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> <script> import VueCkeditor from 'vue-ckeditor2'; export default { components: { VueCkeditor }, data() { return { content: '', config: { toolbar: [ ['Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript'] ], height: 300 } }; }, methods: { onBlur(evt) { console.log(evt); }, 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); } } }; </script> ``` ### Props | Name | Type | Description | | ----------------------- | ---------- | ---------------------------------------------------------------------------- | | `name` | `String` | Name of instance ckedior. **Default: editor- ** | | `id` | `String` | Id of instance ckedior. **Default: editor-1** | | `types` | `String` | Types of ckedior. **Default: classic** | | `config` | `Object` | All configuration of ckeditor. **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) ## Created By - [Dang Van Thanh](https://github.com/dangvanthanh) Thanks to: - [Eduárd Moldován](https://github.com/edimoldovan) - [Dominique FERET](https://github.com/DominiqueFERET) - [comfuture](https://github.com/comfuture) - [旺旺](https://github.com/chengpan168) - [Tony Yip](https://github.com/tonyhhyip) - [Nedyalko Dyakov](https://github.com/ndyakov) - [Bryan Miller](https://github.com/bryanjamesmiller) - [Jeff Omiecinski](https://github.com/omiecinski) - [rlfscin](https://github.com/rlfscin) - [Renato Souza](https://github.com/renatosistemasvc) - [Fernando Morgenstern](https://github.com/fernandomm) - [Christoph-Wagner](https://github.com/Christoph-Wagner) - [Patrick Davey](https://github.com/patrickdavey) - [Michali Sarris](https://github.com/msarris) ## License MIT © [Dang Van Thanh](http://dangthanh.org)