Vue CKEditor
made with Vuejs

Vue CKEditor

这是一个用于Vue.js的CKEditor富文本编辑器组件。

相关问答
暂无相关问题
查看全部
简介及使用教程

Vue CKEditor是一个用于Vue.js的CKEditor富文本编辑器组件,是对CKeditor2的Vue封装。

安装

Npm

npm i vue-ckeditor2

Yarn

yarn add vue-ckeditor2

浏览器

<script src="https://cdn.ckeditor.com/4.10.0/standard/ckeditor.js"></script>

使用

<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>

示例

image.png

作者

Dang Van Thanh

@dangvanthanh

相关项目

这是一个基于Vue.js的Github样式的日历热图。
这是一个基于Splide的Vue滑块组件。
这是一个基于Vue的滚动条组件。
这是一个Bootstrap风格简单分页组件。
这是一个Vue.js 2打字机效果组件 。
这是一个漂亮的Vue聊天组件。
这是一个基于Vue.js的模拟命令行效果的动画组件。