ckeditor vue2_Ckeditor用于Vue.js 2

ckeditor vue2

维克迪克特 (vue-ckeditor)

Ckeditor using for Vue.js 2.

Ckeditor用于Vue.js 2。

要求 (Requirements)

• Ckeditor >= 4

  Ckeditor > = 4

• Vue.js >= 2

  Vue.js > = 2

安装 (Install)

CDN (CDN)

<script src="https://unpkg.com/vue-ckeditor2"></script>

NPM (NPM)

$ npm install vue-ckeditor2 --save

用法 (Usage)

This document applies to v2.0+. If you are looking for older versions, docs are here

本文档适用于v2.0 +。 如果您正在寻找较旧的版本，请在此处找到文档

import Vue from 'vue';
import VueCkeditor from 'vue-ckeditor2';

Vue.use(VueCkeditor);

Then in your component:

然后在您的组件中：

<template>
  <div>
    <vue-ckeditor v-model="content" :config="config" @blur="onBlur($event)" @focus="onFocus($event)" />
  </div>
</template>

<script>
export default {
  data () {
    return {
      content: '',
      config: {
        toolbar: [
          [ 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript' ]
        ],
        height: 300
      }
    }
  },
  methods: {
    onBlur (editor) {
      console.log(editor)
    },
    onFocus (editor) {
      console.log(editor)
    }
  }
}
</script>

道具 (Props)

Name	Type	Description
name	String	Name of instance ckedior. Default: editor-1
id	String	Id of instance ckedior. Default: editor-1
types	String	Types of ckedior. Default: classic
config	Object	All configuration of ckeditor. Default: {}

名称	类型	描述
name	String	实例名称ckedior。 默认值：editer-1
id	String	实例ckedior的ID。 默认值：editer-1
types	String	ckedior的类型。 默认值：经典
config	Object	ckeditor的所有配置。 默认值：{}

翻译自: https://vuejsexamples.com/ckeditor-using-for-vue-js-2/

ckeditor vue2