CKEditor vue3引入

CKEditor 5 Online Builder | Create your own editor in 5 steps

这个是官网网站的自定义功能构建，可按需构建功能

选择相关功能

如果需要上传图片，需要取消CKBOX，勾选Simple upload adapter，这两者互有冲突不可同时选择

选择工具栏项目

选择语言

打包下载即可

下载完成后解压缩

将文件夹放在vue项目根目录

在package.json引入

1. key名字 是在自己项目中引入时用到，value中file: 告诉npm要下载本地包（本地包的名字是刚开始自定应的名字）
   注意：配置完后执行npm install安装

2. 在自己项目下执行命令安装@ckeditor/ckeditor5-vue，同时在在package.json引入

   npm install @ckeditor/ckeditor5-vue -S
   or
   pnpm add @ckeditor/ckeditor5-vue -S
   or
   year add @ckeditor/ckeditor5-vue -S

最后在页面引入

<CKEditor.component
        :editor="state.editor"
        v-model="state.editorData"
        :config="state.editorConfig"
      ></CKEditor.component>

import CKEditor from "@ckeditor/ckeditor5-vue";
import ClassicEditor from "ckeditor5";

const state = ref({
  editor: ClassicEditor,
  editorData: "<p>Content of the editor.</p>",
  editorConfig: {
    // The configuration of the editor.
    
    simpleUpload: {
      // The URL that the images are uploaded to.
      uploadUrl: "http://example.com",

      // Enable the XMLHttpRequest.withCredentials property.
      withCredentials: false,

      // Headers sent along with the XMLHttpRequest to the upload server.
      headers: {
        "X-CSRF-TOKEN": "CSRF-Token",
        Authorization: "Bearer <JSON Web Token>",
      },
    },
  },
});

附上官网下载的包可自取

npm i @rollup/plugin-commonjs

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import commonjs from '@rollup/plugin-commonjs';//引入commojs

export default defineConfig({
  plugins: [
    commonjs() as any,
    vue(),
  ],
 }

兼容vite的rollup，commonjs要放在vue上