Newfangled Package Modernizer

    vue-ckeditor2

    2.1.5 • Public • Published

    vue-ckeditor

    Ckeditor using for Vue.js 2

    Requirements

    Install

    CDN

    <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

    Component

    Then in your component:

    <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 should send XHR
    fileUploadResponse Event fired when the file loader response is received and needs to be parsed

    Build Setup

    You can use vue-cli with vue-rollup-boilerplate templates or other vue templates

    Created By

    Thanks to:

    License

    MIT © Dang Van Thanh

    Install

    npm i vue-ckeditor2

    DownloadsWeekly Downloads

    1,852

    Version

    2.1.5

    License

    MIT

    Unpacked Size

    68.1 kB

    Total Files

    12

    Last publish

    Collaborators

    • dangvanthanh