ckeditor5-vue自定义图片上传函数

文档：https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/vuejs.html

共同的依赖

cnpm i -S @ckeditor/ckeditor5-vue  axios

自定义上传图片插件

MyUploadAdapter.js

import axios from "axios";

/**
 * 自定义上传图片插件
 */
class MyUploadAdapter {
  constructor(loader) {
    this.loader = loader;
  }

  async upload() {
    const data = new FormData();
    data.append("file", await this.loader.file);

    const res = await axios({
      url: process.env.VUE_APP_BASE_URL + `/upload`,
      method: "POST",
      data,
      withCredentials: true, // true 为不允许带 token, false 为允许
    });

    console.log(res.data);
    // 后台返回数据：
    // {"code":0,"msg":"success","data":{"url":"/upload/struts2.jpeg"}}

    // 方法返回数据格式： {default: "url"}
    return {
      default: process.env.VUE_APP_TARGET_URL + res.data.data.url,
    };
  }
}

export default MyUploadAdapter;

ClassicEditor

安装依赖

cnpm i -S @ckeditor/ckeditor5-build-classic

使用示例

<template>
  <div id="ck-editer">
    <ckeditor :editor="editor"
      @ready="onReady"
      v-model="editorData"
      :config="editorConfig">
    </ckeditor>
  </div>
</template>

<script>

import ClassicEditor from "@ckeditor/ckeditor5-build-classic";
import CKEditor from "@ckeditor/ckeditor5-vue";
import "@ckeditor/ckeditor5-build-classic/build/translations/zh-cn";
import MyUploadAdapter from "./MyUploadAdapter.js";

export default {
  components: {
    ckeditor: CKEditor.component
  },

  data() {
    return {
      editor: ClassicEditor,
      editorData: "<div>Content of the editor.</div>",
      editorConfig: {
        // The configuration of the editor.
        language: "zh-cn"
        // ckfinder: {
        //   // 后端处理上传逻辑返回json数据, 包括uploaded 上传的字节数 和url两个字段
        //   uploadUrl: process.env.VUE_APP_BASE_URL + `/upload`
        // }
      }
    };
  },
  
  methods: {
    onReady(editor) {
      // 自定义上传图片插件
      editor.plugins.get("FileRepository").createUploadAdapter = loader => {
        return new MyUploadAdapter(loader);
      };
    }
  }
};
</script>

<style lang="scss">
/* 全局修改生效 */
#ck-editer {
  .ck.ck-editor__editable_inline {
    p {
      line-height: 1.5;
    }

    min-height: 400px;
  }
}
</style>

参考文章

1. 自定义图片上传
2. Rich text editor component for Vue.js
3. 参数配置

Document editor

依赖

npm i - S @ckeditor/ckeditor5-build-decoupled-document

<template>
  <div id="ck-editer">
    <ckeditor :editor="editor"
      @ready="onReady"
      v-model="editorData"
      :config="editorConfig">
    </ckeditor>
  </div>
</template>

<script>

import CKEditor from "@ckeditor/ckeditor5-vue";
import DecoupledEditor from "@ckeditor/ckeditor5-build-decoupled-document";
import "@ckeditor/ckeditor5-build-decoupled-document/build/translations/zh-cn";
import MyUploadAdapter from "./MyUploadAdapter.js";

export default {
  name: "",

  props: {
    // v-model
    value: {
      type: String,
      default: "",
    },
  },

  components: {
    ckeditor: CKEditor.component,
  },

  data() {
    return {
      editor: DecoupledEditor,
      editorConfig: {
        // The configuration of the editor.
        language: "zh-cn",
      },
    };
  },

  computed: {
    editorData: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit("input", val);
      },
    },
  },

  methods: {
    onReady(editor) {
      // Insert the toolbar before the editable area.

      editor.ui.getEditableElement().parentElement.insertBefore(
        editor.ui.view.toolbar.element,

        editor.ui.getEditableElement()
      );

      // 自定义上传图片插件
      editor.plugins.get("FileRepository").createUploadAdapter = (loader) => {
        return new MyUploadAdapter(loader);
      };
    },
  },

  created() {},
};
</script>

<style lang="scss">
/* 全局修改生效 */
#ck-editer {
  // 编辑器高度，边框
  .ck-content {
    min-height: 400px;
    border: 1px solid #ccc !important;
    background-color: white;
  }
}
</style>

参考

1. 文档: https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/vuejs.html#using-the-document-editor-build
2. CKEdior5 文档编辑器构建步骤 vue富文本编辑器