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 ...
随机推荐
- springboot性能优化
一.扫描优化 原文链接:http://www.studyshare.cn/blog-front/blog/details/1135 SpringBoot项目中的启动类,会使用@SpringBootAp ...
- WPF 自定义控件缩放
方式一: 自定义控件使用固定大小绘制:控件内的各个子控件大小设定固定值 优点:控件绘制简单.快捷. 缺点:使用时如需缩放,需在自定义控件的外面加一个 ViewBox . 使用示例如下(将 UserCo ...
- JS防抖与节流函数封装
防抖 在监听scroll事件的时候经常会用到防抖,当滚动到某一位置而触发状态,从而不会出现频繁滚动持续触发事件的情况 防抖的事件处理机制仅触发一次且必须是结束状态下才会执行 function debo ...
- query did not return a unique result: 2错误的发生
org.springframework.dao.IncorrectResultSizeDataAccessException: query did not return a unique result ...
- rest_framework_extensions实现缓存
1.安装包 pip install drf-extensions pip install django-redis pip install django-redis-cache 2.配置redis # ...
- CS通用项目系统搭建——三层架构第一天
CS通用项目:使用三层架构进行搭建 三层架构: 表现层(UI(User Interface)):展示给用户的层面,包含窗体控件数据等信息. 业务逻辑层(BLL(Business Logic Layer ...
- 软件工程Ⅱ:Git的安装与使用
作业要求来自于https://edu.cnblogs.com/campus/gzcc/GZCC-16SE2/homework/2097 1.下载安装配置用户名和邮箱. (1) 安装Git软件. (2) ...
- PowerScript数据类型及变量
PowerBuilder的标准数据类型共有14种 数据类型 意 义 示 例 Blob 二进制数据 可存放可变长度的大量数据,如图片,其它类型的文档数据. 如保存位图 Boolean 布尔型 ...
- zigbee_蓝牙_wifi的比较与区别分析
现在无线通读热了起来.三个最大的Wifi.ZigBee.蓝牙它们三个始终困惑着我.那么它们三个有什么区别呢? Zigbee 和蓝牙都是一项无线通信技术.ZigBee的传输距离视发射功率而定,有几百到几 ...
- 如何把ppt写好
前言 这里不是总结ppt如何写的美观漂亮,而是总结写整体的结构,如何修辞 整体结构 前后呼应 就像做作文一样,前后呼应,产生共鸣和联想,切记过于离散 抽象化 不要把自己做的东西写小了,要有一定的抽象度 ...