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>

参考文章

自定义图片上传

Rich text editor component for Vue.js

参数配置

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-modelvalue: {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>

参考

文档: https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/vuejs.html#using-the-document-editor-build

CKEdior5 文档编辑器构建步骤 vue富文本编辑器

ckeditor5-vue自定义图片上传函数相关推荐

vue3开发1：在vue3项目中集成ckeditor5编辑器，自定义图片上传，图片编辑排坑（一）
最近尝试用了vue3进行开发,没想到在使用element-plus框架的时候出现了bug(一个星期后官方修复了),所以我对在项目中集成富文本插件ckeditor5比较忐忑,而且也没有vue3中集成ck ...
vue+vant图片上传压缩图片大小
vue+vant图片上传压缩图片大小可能在项目中大家都会遇到文件上传的需求,比如头像,图片等,但是太大的文件上传会给服务器造成很大大压力,那么我们就需要压缩上传的文件其实这儿所说的压缩,就是图片重 ...
vue获取上传图片的名字和路径_使用Vue实现图片上传的三种方式
项目中需要上传图片可谓是经常遇到的需求,本文将介绍 3 种不同的图片上传方式,在这总结分享一下,有什么建议或者意见,请大家踊跃提出来. 没有业务场景的功能都是耍流氓,那么我们先来模拟一个需要实现的业务 ...
quill自定义图片上传
quill是个不错的富文本编辑器,但是它的图片上传是直接将本地图片读成base64跟文本混合在一起,这显然不适合一般开发需求,我们希望插入的是一个图片url,故这里将基于vue.js实现quill的图 ...
vue中图片上传及回显
在vue中图片上传到服务器下指定路径,并实现根据图片路径调取后台接口返回图片流在vue页面展示图片一.图片上传 1.前台上传 <template slot-scope="scope& ...
vue 自定义视频上传 el-upload图片上传
使用el-upload 上传视频总是报404错误,具体也不知道什么原因(如有知道的请评论告知,谢谢),去网上查了很多,代码写法确定是没有问题的,最后改为axios上传视频,就没出错了,顺便总结下图片上 ...
vue2 + tinymce 包含自定义图片上传及视频、音频上传
安装安装时需要注意一个问题,两个包如果不适用会出现报错情况且无法使用,我这边使用的是当前这两个版本 npm install @tinymce/tinymce-vue@3.2.8 -S npm ins ...
vue实现图片上传功能
vue实现图片上传功能一.vue的核心插件 1. vuex 2. vue-router 二.服务器代理配置三.路由配置四.自定义axios 五.请求服务器逻辑六.vuex-store 七.登录 ...
uve 使用百度ueditor自定义图片上传,在线图片插入,在线图片管理
前言本帖所有内容均用于学习使用,如有涉及侵权,请看到后联系我进行删帖上图片环境 "axios": "^0.21.1", "element-ui& ...
【富文本】wangeditor编辑器简单使用（自定义图片上传）
一.wangeditor 官网二.引入 // 安装 npm i wangeditor --save// 使用 import E from "wangeditor" const e ...

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

ClassicEditor

Document editor

ckeditor5-vue自定义图片上传函数相关推荐

最新文章

热门文章