虽然Ckeditor 中自带的有上传图片和文件的功能,但是有时候我们并不需要把图片保存至服务器的文件夹中.

反而是截图复制粘贴,把图片转化为base64格式保存在数据库中即可满足要求.

1.首先下载安装包(选择最右边的,完整的安装包)

https://ckeditor.com/ckeditor-4/download/#ckeditor4

2.把下载的安装包引入项目中,并在页面中引用js

3.自定义配置文件,在文件夹中找到config.js.并配置自己所需要的

4.页面使用一个textarea标签.并给该标签赋值id属性.

然后初始化控件,重写控件剪切版的复制粘贴方法.此时已配置完成.(此处注意,一定要指定重写的控件的ckname.否则此处的重写事件this指的将是整个页面的所有的Ckeditor.

这样重写事件将会出错.我就在此处犯了这个错误折腾了一个多小时....)

代码

CKEDITOR.replace('description');
SetCKEditor("description", _self.model.Description);

function SetCKEditor(ckname, data) {
  CKEDITOR.instances[ckname].on('instanceReady', function (event) {
  var _data = (data || "");
  if (_data != "") {
    this.setData(HTMLEncode(_data));
  }
  this.document.on("paste", function (e) {//重写该ckeditor实例的粘贴事件
  var items = e.data.$.clipboardData.items;//获取该ckeditor实例的所有剪切板数据
  for (var i = 0; i < items.length; ++i) {//循环该数据并只获取类型为image/png格式的数据
    var item = items[i];
    if (item.kind == 'file' && item.type == 'image/png') {
      var imgFile = item.getAsFile();
      if (!imgFile) {
        return true;
      }
      var reader = new FileReader();
      reader.readAsDataURL(imgFile);//转化为base64格式
      reader.onload = function (e) {//在控件中插入该图片
      CKEDITOR.instances["description"].insertHtml('<img src="' + this.result + '" alt="" />');
    }
  return false;
  }
  }
  });
  });
}

5.截图,并在该控件的剪切板中Ctrl + V .

复制剪切的图片并转化为base64格式功能已完成.但是会发现控制台报错

这个查了一下是因为新版ckeditor增加了云服务,用于上传资源用的,而且默认是开启的,所以只需要关闭相应的插件即可解决该异常

config.removePlugins = 'easyimage,cloudservices';

至此Ckeditor控件的复制粘贴图片,并转化图片为base64格式已转化完成.只需获取控件的内容保存至数据库即可.

此处也可参考

ckeditor控件的官方文档

https://ckeditor.com/docs/ckeditor4/latest/api/index.html

这个页面有ckeditor控件的实现原理,以及代码

https://www.cnblogs.com/happen-/p/8350557.html

https://blog.csdn.net/jiangzeyin_/article/details/75193587

Ckeditor 4 复制粘贴截图并转化base64格式保存至数据库的更多相关文章

  1. 图片转化base64格式

    public function Base64EncodeImage($ImageFile) { // 图片转化base64格式 , 图片需要在本地,有访问权限 , 相对于项目路径 if(file_ex ...

  2. html中canvas渲染图片,并转化成base64格式保存

    最近在做一个上传头像然后保存显示的功能,因为涉及到裁剪大小和尺寸比例,所以直接上传图片再展示的话,就会出现问题,所以就想用canvas来渲染裁剪后的图片,然后转化成base64格式的图片再存储,这样取 ...

  3. Nodejs如何把接收图片base64格式保存为文件存储到服务器上

    app.post('/upload', function(req, res){ //接收前台POST过来的base64 var imgData = req.body.imgData; //过滤data ...

  4. Nodejs接收图片base64格式保存为文件

    base64的形式为“data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0....”:当接收到上边的内容后,需要将data ...

  5. CSDN中的MARKDOWN编辑器如何快速复制粘贴图片?

    前言 我们在使用csdn的markdown编辑器复制其它网站图片,按住ctrl+C复制选择图片,然后按ctrl+V粘贴图片到md编辑器无任何反应!markdown编辑器每次都没法复制粘贴截图! 下面小 ...

  6. base64格式的图片数据如何转成图片

    base64格式的图片数据如何转成图片 一.总结 一句话总结:不仅要去掉前面的格式串,还需要base64_decode()解码才行. // $base_img是获取到前端传递的值 $base_img ...

  7. 原生js复制粘贴上传图片前后台代码,兼容firebox,chrome, ie11,亲测有效

    需求:粘贴上传图片,截图工具,右键粘贴,或者ctrl+v粘贴 方法1:可直接套用富文本框的图片上传功能,完成复制粘贴 缺点:麻烦,样式难控制 方法2:用原生js完成,以下案例基于此,样式请自己动手调整 ...

  8. 富文本编辑器直接从 word 中复制粘贴公式

    在之前在工作中遇到在富文本编辑器中粘贴图片不能展示的问题,于是各种网上扒拉,终于找到解决方案,在这里感谢一下知乎中众大神以及TheViper. 通过知乎提供的思路找到粘贴的原理,通过TheViper找 ...

  9. 利用html2canvas截图,得到base64上传ajax

    <script type="text/javascript" src="js/html2canvas.js"></script> //布 ...

随机推荐

  1. ajax stream 一边下载二进制数据一边处理

    最近有在做 stream 下载,并且边下载 stream 边处理功能.解析二进制的功能.最初参考了 flv.js 的 flv stream 下载处理功能,发现他并没有使用的 XMLHttpReques ...

  2. UnityShader实例15:屏幕特效之Bloom

    http://blog.csdn.net/u011047171/article/details/48522073 Bloom特效       概述        Bloom,又称“全屏泛光”,是游戏中 ...

  3. javascript中string的用法总结

    javascript中很经常的会用到string类型的变量,对此,总结了几种常用操作或者方法:创建.拼接.子串.大小写转换.判断字符串相等.字符串查找等几种.下面将一一简单描述. 一.js中strin ...

  4. python中文件打开的各个标识含义

    w代表清空后写入 r代表打开后追查 +代表可以写 b代表二进制写入

  5. 利用dynamic来提供动态方法的性能

    前段时间做了一个worklist的项目,有部分是利用xml配置DICOM的tag,然后根据xml把DICOM的Dataset转为实体类,或者把实体类转为Dataset. 当中主要应用了反射来调用Dat ...

  6. 通用RowMapper封装查询结果到自定义类中

    package object; import java.lang.reflect.Field;import java.sql.ResultSet;import java.sql.SQLExceptio ...

  7. LVS实战1

    (一).NAT模式:NAT模型:地址转换类型,主要是做地址转换,类似于iptables的DNAT类型,它通过多目标地址转换,来实现负载均衡:特点和要求: 1.LVS(Director)上面需要双网卡: ...

  8. css3 利用perspective实现翻页效果和正方体 以及翻转效果

    要点: 1 实现3D效果就需要使用perspective属性 1 页面旋转使用css3的rorate 2 使用backface-visibility 实现正面元素翻转之后背面不可见,显示出反面的元素 ...

  9. js之递归拼树(树结构的数据结构)

  10. JavaScript之使用JavaScript模仿oop编程

    第一, 首先,使用关键字function定义一个类 function Shape1(ax,ay) {//此时将function看成声明类的标志 ; ; var init=function () {// ...