下面是自定义了一个适配器,之前我一直是在
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 图片上传的更多相关文章

  1. CKEditor5 + vue2.0 自定义图片上传、highlight、字体等用法

    因业务需求,要在 vue2.0 的项目里使用富文本编辑器,经过调研多个编辑器,CKEditor5 支持 vue,遂采用.因 CKEditor5 文档比较少,此处记录下引用和一些基本用法. CKEdit ...

  2. CKEditor5 使用第二天 获取回传数据,图片上传

    1.当系统中存在编辑功能时,需要将数据库中数据回显到页面,因此采用了最一般的方法,通过隐藏的input标签存贮,在通过CkEditor5中的setData方法将数据赋值到富文本框中 <texta ...

  3. Asp.Net Mvc 使用WebUploader 多图片上传

    来博客园有一个月了,哈哈.在这里学到了很多东西.今天也来试着分享一下学到的东西.希望能和大家做朋友共同进步. 最近由于项目需要上传多张图片,对于我这只菜鸟来说,以前上传图片都是直接拖得控件啊,而且还是 ...

  4. 06.LoT.UI 前后台通用框架分解系列之——浮夸的图片上传

    LOT.UI分解系列汇总:http://www.cnblogs.com/dunitian/p/4822808.html#lotui LoT.UI开源地址如下:https://github.com/du ...

  5. JS图片上传预览插件制作(兼容到IE6)

    其实,图片预览功能非常地常见.很意外,之前遇到上传图片的时候都不需要预览,也一直没有去实现过.现在手上的项目又需要有图片预览功能,所以就动手做了一个小插件.在此分享一下思路. 一.实现图片预览的一些方 ...

  6. HTML5笔记:跨域通讯、多线程、本地存储和多图片上传技术

    最近做项目在前端我使用了很多新技术,这些技术有bootstrap.angularjs,不过最让我兴奋的还是使用了HTML5的技术,今天我想总结一些HTML5的技术,好记性不如烂笔头,写写文章可以很好的 ...

  7. 对百度的UEditor多图片上传的一些补充

    我已经写了一篇文章关于百度的UEditor提取多图片上传模块.如果还没有看过,请点击以下链接查看 http://www.cnblogs.com/luke1006/p/3719029.html 出差了两 ...

  8. 使用localResizeIMG3+WebAPI实现手机端图片上传

    前言 惯例~惯例~昨天发表的使用OWIN作为WebAPI的宿主..嗯..有很多人问..是不是缺少了什么 - - 好吧,如果你要把OWIN寄宿在其他的地方...代码如下: namespace Conso ...

  9. TinyMCE的使用(包括汉化及本地图片上传功能)

    TinyMCE我就不多介绍了,这是下载地址:https://www.tinymce.com/download/ 下载下来是英文版,要汉化也很简单.首先去网上随便下载个汉化包,然后把汉化包解压后的lan ...

随机推荐

  1. [记录] Vue中的dom操作

    使用过Vue的同学都应该有这样一个感觉,在vue中页面是基于数据驱动的,不需要我们自己操作dom,框架帮我们完成了这一步,事实上Vue官方也建议我们这样做 在绝大多数情况下是不需要操作dom就可以完成 ...

  2. pyqt------对话框

    一 .输入文字 from PyQt5.QtWidgets import (QWidget, QPushButton, QLineEdit, QInputDialog, QApplication) im ...

  3. “帮你”APP——NABCD需求分析

    1.你的创意解决了用户的什么需求?(N) 本学校已存在的失物招领.表白墙.二手市场等QQ群普遍存在信息冗杂,时效性差等缺点.不能充分发挥信息有效性的,我们的“帮你”APP能够充分发挥信息的有效性,让失 ...

  4. 阿里云 RDS for MySQL 物理备份文件恢复到自建数据库

    想把阿里云的Mysql 生成的RAS 文件.tar文件 恢复到本地自建mysql, 遇到的坑.希望帮助大家 阿里云提供的地址 https://help.aliyun.com/knowledge_det ...

  5. Spark sql 在yarn-cluster模式下找不到表

    在hive里建一个数据库test,在数据库里建了一张表user,然后在Spark程序中使用Spark sql读取这张表 "select * form test.user" 当部署模 ...

  6. How to Build a New Habit: This is Your Strategy Guide

    How to Build a New Habit: This is Your Strategy Guide by James ClearRead this on JamesClear.com Acco ...

  7. Windows下nginx下安装amqp

    1.复制php_amqp.dll 到php/ext/ 2.复制rabbitmq.4.dll 到php/3.复制rabbitmq.4.dll 到windows/system32/ (如32位) ,64位 ...

  8. js一行代码解决各种IE兼容问题

    在网站开发中不免因为各种兼容问题苦恼,针对兼容问题,其实 IE给出了解决方案 Google也给出了解决方案 百度也应用了这种方案去解决IE的兼容问题 百度源代码如下 <!Doctype html ...

  9. 《DOM Scripting》学习笔记-——第五章、第六章 案列改进

    第四章的案例代码可以得到更好的改进.例如:预留退路.向后兼容性和分离js. 原html代码: <!DOCTYPE html> <html lang="en"> ...

  10. Day08 - Ruby比一比:String的+=与concat串接

    前情提要: 在第七天我们透过比较Symbol和String,发现字串比符号多了更多方法!为了活用string method,今天我们接续前文,来探讨一题跟字串有关的题目: Ruby经典面试题目#08( ...