Vue-CKEditor2 使用教程

最新推荐文章于 2025-04-11 16:07:02 发布

羿晴汝Gillian

最新推荐文章于 2025-04-11 16:07:02 发布

阅读量388

点赞数 3

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_00899/article/details/141347830

Vue-CKEditor2 使用教程

项目地址:https://gitcode.com/gh_mirrors/vu/vue-ckeditor2

项目介绍

Vue-CKEditor2 是一个专为 Vue.js 2.x 设计的 CKEditor 集成方案，让开发富文本编辑功能变得轻而易举。通过无缝对接享誉业界的 CKEditor 4.x 版本，该插件赋予了开发者高度可定制的内容编辑能力，无论是简单的文档编写还是复杂的媒体插入都能得心应手。

项目快速启动

安装

首先，确保你已经安装了 Vue.js 和 CKEditor 4。然后，你可以通过 npm 或直接引入 CDN 来安装 Vue-CKEditor2。

使用 npm 安装

npm install vue-ckeditor2

引入 CDN

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.ckeditor.com/4.16.2/standard/ckeditor.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-ckeditor2"></script>

使用

在你的 Vue 组件中引入并使用 Vue-CKEditor2。

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

<script>
import VueCkeditor from 'vue-ckeditor2';

export default {
  components: { VueCkeditor },
  data() {
    return {
      content: '',
      config: {
        toolbar: [
          ['Bold', 'Italic', 'Underline'],
          ['NumberedList', 'BulletedList'],
          ['Link', 'Unlink'],
          ['Undo', 'Redo'],
        ],
        height: 300,
      },
    };
  },
  methods: {
    onBlur(event) {
      console.log('Editor blur:', event);
    },
    onFocus(event) {
      console.log('Editor focus:', event);
    },
  },
};
</script>