通过ckeditor组件在vue2中实现上传图片

1，开始实现逻辑前，优先启项目，然后将ckeditor引入，大概如下：

1，npm i @ckeditor/ckeditor5-vue2
2，下载sdk，https://ckeditor.com/ckeditor-5/online-builder/#，打开这个地址，配完就可以下载
3，启动sdk，运行npm install ,npm run build,在build文件夹下就有一个ckeditor.js

直接将这个js放到我们的项目public下，通过script引入即可

接下来就是项目配置

1，配置图片上传，其实就是imageUpload这个插件，首先在组件ckeditor添加属性config
2，配置菜单

3，在初始化方法中调用上传api


4，创建MyUploadAdapter类

import axios from 'axios'
export default class MyUploadAdapter {
  constructor(loader, url, token) {
    // 文件
    this.loader = loader;
    // 链接
    this.url = url;
    // token
    this.token = token;
  }

  // 特定方法，必须得有
  async upload() {
     return  this.uploadFile(this.loader.file);
  }

  //上传文件
  async uploadFile(file, resolve, reject) {
    const data = new FormData();
    data.append("file", file);
    let res = await axios({
      url: this.url,
      method: "POST",
      headers: {
        Host: this.url,
        "Content-Type": "multipart/form-data",
      },
      data: {
        fileBinaryData: data,
        upload_token: this.token,
        fileName: file.name,
      },
    })
    // console.log(res.data.tableListData[0].classIntroduce)
    return {
        // default: res.data.tableListData[0].classIntroduce,
        // 返回请求的图片路径
        default: res.data.url
      };

  }

  // 取消请求
  abort() {
    server.abortUpload();
  }

}

 

5，在我们的组件中引入即可，这样上传图片就完成了，整体代码

<template>
  <div>
    <ckeditor :editor="editor" :value="editorData" :disabled="disabled" :config="editorConfig" @ready="onEditorReady" @focus="onEditorFocus" @blur="onEditorBlur" @input="onEditorInput" @destroy="onEditorDestroy"></ckeditor>
  </div>
</template>

<script>
import MyUploadAdapter from './MyUploadAdapter.js'
export default {
  name: 'app',
  props: {
    editorData: {           // 初始默认值
      type: String,
      default: '',
    },
    disabled: {             // 是否只读
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      editor: ClassicEditor,
      // 七牛云的地址
      // url: '',
      // 本地mock数据接口
      url:'',
      // token
      token: '',
      editorConfig: {
        toolbar: [
          'heading',     // 标题
          '|',
          'fontfamily',  // 字体
          'fontsize',    // 字号
          'fontColor',   // 字体颜色
          'fontBackgroundColor',  // 背景颜色
          '|',
          'bold',        // 加粗
          'italic',      // 斜体
          'underline',   // 下划线
          'strikethrough',       // 删除线
          '|',
          'alignment:left',      // 左对齐
          'alignment:right',     // 右对齐
          'alignment:center',    // 居中对齐
          'alignment:justify',   // 分散对齐
          '|',
          'numberedList', // 数字编号
          'bulletedList', // 项目符号
          '|',
          'outdent',      // 左缩进
          'indent',       // 右缩进
          '|',
          'link',         // 链接
          'blockquote',   // 引用
          'insertTable',  // 插入表格
          'imageUpload',  // 插入图片
          'MediaEmbed',   // 视频插入
          'html5video',
          '|',
          'undo',         // 撤销
          'redo',         // 重做
        ],
        
      }
    };
  },
  methods: {
    // 初始化
    onEditorReady(editor) {
      console.log('初始化')
      // 上传图片的逻辑
      editor.plugins.get('FileRepository').createUploadAdapter = (loader) => {
        return new MyUploadAdapter(loader, this.url, this.token)
      }

    },
    // 聚焦
    onEditorFocus() {
      console.log('聚焦')
    },
    // 失去焦点
    onEditorBlur() {
      console.log('失去焦点')
    },
    // 输入
    onEditorInput() {
      console.log('输入')
    },
    // 页面卸载
    onEditorDestroy() {
      console.log('卸载')
    }
  },
}
</script>

<style >
.ck-rounded-corners .ck.ck-editor__main>.ck-editor__editable, .ck.ck-editor__main>.ck-editor__editable.ck-rounded-corners  {
  height: 200px !important;
}
</style>