CKeditor5 图片上传
下面是自定义了一个适配器,之前我一直是在
ClassicEditor
.create( editorElement, {
ckfinder: {
uploadUrl: '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files&responseType=json'
}
} )
.then( ... )
.catch( ... );
这里添加了个 ckfinder ,没弄出来。 所以用了下面 很 贼几把OK,感谢发我这段代码的 那位大佬。
// 上传适配器,格式官网上有,以一种Promise 的方式。Promise好像是有阻塞的意思在里面。
class UploadAdapter {
constructor(loader) {
this.loader = loader;
}
upload() {
return new Promise((resolve, reject) => {
const data = new FormData();
data.append('upload', this.loader.file);
data.append('allowSize', 10);//允许图片上传的大小/兆
$.ajax({
url: 'loadImage',
type: 'POST',
data: data,
dataType: 'json',
processData: false,
contentType: false,
success: function (data) {
if (data.res) {
resolve({
default: data.url
});
} else {
reject(data.msg);
} }
}); });
}
abort() {
}
} DecoupledEditor
.create( document.querySelector( '#b' ), {
language:"zh-cn"
})
.then( editor => {
const toolbarContainer = document.querySelector( '#a' );
toolbarContainer.appendChild( editor.ui.view.toolbar.element ); // 这个地方加载了适配器
editor.plugins.get('FileRepository').createUploadAdapter = (loader)=>{
return new UploadAdapter(loader);
};
} )
.catch( error => {
console.error( error );
} );
2018年5月7日22:47:58
CKeditor5 图片上传的更多相关文章
- CKEditor5 + vue2.0 自定义图片上传、highlight、字体等用法
因业务需求,要在 vue2.0 的项目里使用富文本编辑器,经过调研多个编辑器,CKEditor5 支持 vue,遂采用.因 CKEditor5 文档比较少,此处记录下引用和一些基本用法. CKEdit ...
- CKEditor5 使用第二天 获取回传数据,图片上传
1.当系统中存在编辑功能时,需要将数据库中数据回显到页面,因此采用了最一般的方法,通过隐藏的input标签存贮,在通过CkEditor5中的setData方法将数据赋值到富文本框中 <texta ...
- Asp.Net Mvc 使用WebUploader 多图片上传
来博客园有一个月了,哈哈.在这里学到了很多东西.今天也来试着分享一下学到的东西.希望能和大家做朋友共同进步. 最近由于项目需要上传多张图片,对于我这只菜鸟来说,以前上传图片都是直接拖得控件啊,而且还是 ...
- 06.LoT.UI 前后台通用框架分解系列之——浮夸的图片上传
LOT.UI分解系列汇总:http://www.cnblogs.com/dunitian/p/4822808.html#lotui LoT.UI开源地址如下:https://github.com/du ...
- JS图片上传预览插件制作(兼容到IE6)
其实,图片预览功能非常地常见.很意外,之前遇到上传图片的时候都不需要预览,也一直没有去实现过.现在手上的项目又需要有图片预览功能,所以就动手做了一个小插件.在此分享一下思路. 一.实现图片预览的一些方 ...
- HTML5笔记:跨域通讯、多线程、本地存储和多图片上传技术
最近做项目在前端我使用了很多新技术,这些技术有bootstrap.angularjs,不过最让我兴奋的还是使用了HTML5的技术,今天我想总结一些HTML5的技术,好记性不如烂笔头,写写文章可以很好的 ...
- 对百度的UEditor多图片上传的一些补充
我已经写了一篇文章关于百度的UEditor提取多图片上传模块.如果还没有看过,请点击以下链接查看 http://www.cnblogs.com/luke1006/p/3719029.html 出差了两 ...
- 使用localResizeIMG3+WebAPI实现手机端图片上传
前言 惯例~惯例~昨天发表的使用OWIN作为WebAPI的宿主..嗯..有很多人问..是不是缺少了什么 - - 好吧,如果你要把OWIN寄宿在其他的地方...代码如下: namespace Conso ...
- TinyMCE的使用(包括汉化及本地图片上传功能)
TinyMCE我就不多介绍了,这是下载地址:https://www.tinymce.com/download/ 下载下来是英文版,要汉化也很简单.首先去网上随便下载个汉化包,然后把汉化包解压后的lan ...
随机推荐
- 996 icu我能为你做什么?
今天996,未来icu 996icu地址:https://github.com/996icu/996.ICU 前段时间github上出现了,一个讨论996的项目,这个项目使中国的软件工程师达到了空前的 ...
- Linux OS7 常用
查看防火墙状态: firewall-cmd --state;停止firewall: systemctl stop firewalld.service;禁止firewall开机启动:systemctl ...
- CPU TFLOPS 计算
CPU TFLOPS 计算 姚伟峰 yaoweifeng0301@126.com] http://www.cnblogs.com/Matrix_Yao/ 深度学习任务是一个计算密集型任务,所以很关注计 ...
- 如何在ubuntu中安装php
如何在ubuntu中安装php 情衅 | 浏览 692 次 发布于2016-05-07 12:36 最佳答案 关于Ubuntu下的LAMP配置步骤: 首先要安装LAMP 就是Apache,PH ...
- 使用拦截器对前端传入的字符串进行trim操作
@Before("apiItf()") public void before(JoinPoint joinPoint) throws Exception { Object[] ar ...
- windows安装tf
https://www.cnblogs.com/lvsling/p/8672404.html
- c#+.net常用功能点
1.比较差集合,排除不在集合中的,即data是data1排除data2剩下的数据 var data1 = new List<string>(); var data2 = new List& ...
- 关于activity的一点总结(一)
关于activity的重点: 参考网址:https://blog.csdn.net/qq_26787115/article/details/52556842 一.activity生命周期. 二..启动 ...
- CodeWarrior10 如何复制Workspace配置到另一个workspace
https://mcuoneclipse.com/2012/04/04/copy-my-workspace-settings/comment-page-1/#comment-106061
- Python __dict__属性详解
本文转载自 https://www.cnblogs.com/alvin2010/p/9102344.html 感谢 //偏执 大佬 我们都知道Python一切皆对象,那么Python究竟是怎么管理对象 ...