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 ...
随机推荐
- anaconda安装Opencv报错:Could NOT find PythonLibs: Found unsuitable version "2.7.6",
机器上装了两个python,一个是默认的,一个是anaconda.安装opencv时就报错了: -- Found PythonInterp: /home/deeplp/anaconda2/bin/py ...
- android checkbox自定义(文字位置、格式等)
第一种:在原生中只调整显示位置等: <CheckBox android:id="@+id/checkBox8" android:layout_width="wrap ...
- MSSQL 表修复语句
一早发现C盘爆满了,查询了下发现是mssql下面占用了几十G的log以及mdmp文件 一般发现这种文件就是代表着数据库出问题了. 检查数据库,发现某个数据库有问题,(回想起来前天做了一个操作,可能有问 ...
- Unexpected error: java.security.InvalidAlgorithmParameterException: the trustAnchors parameter must be non-empty 报错
项目中遇到的获取https的数据接口数据时,Unexpected error: java.security.InvalidAlgorithmParameterException: the trustA ...
- 剑指offer——包含min函数的栈
题目:定义栈的数据结构,请在该类型中实现一个能够得到栈中所含最小元素的min函数(时间复杂度为O(1)) 该题是自己第一次采用编程的方式来实现Java中栈的功能,故直接借鉴了大牛的代码 import ...
- 用word发布CSDN文章
目前大部分的博客作者在用Word写博客这件事情上都会遇到以下3个痛点: 1.所有博客平台关闭了文档发布接口,用户无法使用Word,Windows Live Writer等工具来发布博客.使用Word写 ...
- [原创] 扩展jquery-treegrid插件, 实现勾选功能和全删按钮.
新上手一个项目, 因而正好想学习下bootstrap, 所以就采用asp.net mvc + bootstrap来做. 因为需要TreeGrid的控件, 本来想用easyUI.LingerUi.DW ...
- 初学python---排序
1.永久性排序 sort() a = [12,45,1,25,3] a.sort() print(a) ----[1, 3, 12, 25, 45] 2.临时排序 sorted() a = [12, ...
- C#使用Spire.Doc Word for .Net读写Word
以前对Excel或Word文档操作都使用微软的COM组件Microsoft Word 15.0 object library. 但是这种方式必须要求服务器上安装Office,而且会出现读写操作完成后未 ...
- linux 安装 mysql
二进制安装mysql 1,下载安装包,使用国内站点速度会比较快,如清华站点https://mirrors.tuna.tsinghua.edu.cn 登陆linux系统后,使用wget 进行下载mysq ...