vue3使用ckeditor

引用\[1\]:在Vue3中使用CKEditor插件的基本操作步骤如下：首先，你需要下载CKEditor的包并解压到一个文件夹中。你可以从官方网站上下载CKEditor 4的插件，下载地址为https://ckeditor.com/ckeditor-4/download/。根据你的需求选择合适的插件包进行下载。接下来，将解压好的包放到Vue项目的public文件夹中。然后，在项目的index.html文件中引入CKEditor的JavaScript代码，代码如下：

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

接下来，在需要使用CKEditor的地方引入ckeditor.vue组件，并在模板中使用该组件，代码如下：

<template>
  <div>
    <ckeditor @sendContent="getContent" :content="infoText"></ckeditor>
  </div>
</template>

在script标签中，你需要导入ckeditor.vue组件，并在组件的data选项中定义一个infoText变量来存储CKEditor的内容。你还需要定义一个getContent方法来获取CKEditor的内容，代码如下：

<script>
import ckeditor from '../../../../../../../components/ckeditor.vue'

export default {
  components: {
    ckeditor
  },
  data() {
    return {
      infoText: ''
    }
  },
  methods: {
    //获取富文本编辑器内容
    getContent(val) {
      this.infoText = val
    }
  }
}
</script>

通过以上步骤，你就可以在Vue3中使用CKEditor插件了。
#### 引用[.reference_title]
- *1* [VUE3 引入富文本插件 CKEditor5](https://blog.csdn.net/ParkChanyelo/article/details/130008905)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* *3* [关于在vue-3 搭建vue项目中使用 CKEditor](https://blog.csdn.net/weixin_49279406/article/details/119923938)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]