Playing around with a custom Vue CKEditor component

CKEditor v4 & Vue.js v2

Playing around with a custom Vue CKEditor component.

The battle-tested WYSIWYG HTML editor, when you need even more features and legacy compatibility.

Install

yarn add vueckeditor

Usage

VueCkeditor is using ckeditor external.

To start using CKEditor on your website, add a single <script> tag to your HTML page:

<script src="//cdn.ckeditor.com/4.6.2/full/ckeditor.js"></script>

Or visit the official CKEditor Download site. And click the Download CKEditor button to get the .zip installation file. If you want to try out more editor features, you can download the Full Package instead.

Unpack (extract) the downloaded .zip archive to the ckeditor directory in the root of your website.

<script src="/path/to/ckeditor.js"></script>

Import VueCkeditor to your page

Single ckeditor

<template lang="pug">
  #app
    vue-ckeditor(v-model="content")
</template>

<script>
  import VueCkeditor from 'vueckeditor';

  export default {
    components: {
      VueCkeditor
    },
    data() {
      return {
        content: 'Hello World!',
      };
    }
  }
</script>

Multi ckeditor

<template lang="pug">
  #app
    vue-ckeditor(v-model="contentA" id="editor-a")
    vue-ckeditor(v-model="contentB" id="editor-b")
</template>

<script>
  import VueCkeditor from '../src/vueckeditor.vue';

  export default {
    components: {
      VueCkeditor
    },
    data() {
      return {
        contentA: 'Hello World!',
        contentB: 'Hello World!',
      };
    }
  }
</script>

Props

id

Type: String
Required: false
Default: null

height

Type: String
Required: false
Default: 300px

You can find toolbar list of Toolbar Configurator.

Type: Array
Required: false
Default:

[
  'Format',
  ['Bold', 'Italic', 'Strike', 'Underline'],
  ['BulletedList', 'NumberedList', 'Blockquote'],
  ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'],
  ['Link', 'Unlink'],
  ['FontSize', 'TextColor'],
  ['Image'],
  ['Undo', 'Redo'],
  ['Source', 'Maximize']
]

language

Type: String
Required: false
Default: 'zh-cn'

extraplugins

Type: String
Required: false
Default: ''

TIP!!

Update components value with id:
https://jsfiddle.net/zhuowenli/okx75cem/

Folder structure

src/: Source files for this component
- vueckeditor.vue The component itself
example/: Example for demonstrating this component
- index.js: Entry for the example
- App.vue: The root component which we use to load this component
vbuild.example.js: Config file for your example
vbuild.component.js: Config file for your component
vbuild.unit.js: Config file for vbuild to run unit tests
package.json: App manifest
.editorconfig: Ensure consistent editor behaivor
.gitignore: Ignore files we don't need to push