【js + ckeditor】插入base64格式的图片

一、需求说明

直接把图片转成base64插入到富文本

二、需求分析

1、富文本图片格式处理位置

在ckeidtor的目录下有个plugins文件夹，在plugins下新建一个文件夹（自己命名，如simpleupload），进入simpleupload文件夹，再新建一个plugins.js文件，对应编写js代码。

2、将图片转为base64

通过调用 FileReader 对象的 readAsDataURL 方法可以将文件读取成一个data URL，再通过这个 data URL 来获取 Base64字符串。

三、解决办法

plugins.js文件全部代码如下：

(function () {
    // 保存图片方式：选择图片以base64编码保存
  var a = {
    exec: function (editor) {
      // 此处定义点击按钮时的行为
      var $file = document.createElement("input");
      $file.type = "file";
      $file.accept = ".jpg,.png,.jpeg";
      // $file.multiple = "multiple";//选择图片时，可以多选
      $file.click();
      $file.addEventListener("change", function (e) {
        var fileList = e.target.files;
        if (fileList.length > 0) {
          // 因为一次只允许添加一张图片
          var imageData = fileList[0];
          // 检测后缀名
          var lastIndex = imageData.name.lastIndexOf(".");
          var imageSuffix = imageData.name.substring(lastIndex + 1);
          // 判断后缀名
          if (!(imageSuffix === "png" || imageSuffix === "jpg" || imageSuffix === "jpeg")) {
            alert('图片格式只支持"png, jpg, jpeg格式"');
            return;
          }
          // 大小不能超过2M
          if (imageData.size > 2 * 1024 * 1024) {
            alert("图片大小不能超过2M");
            return;
          }
          // 使用FileReader接口读取图片
          var reader = new FileReader();
          reader.addEventListener("load", function () {
            var imageBase64 = reader.result; //base64编码
            editor.insertHtml(
              "<p><img style='max-width:70%' class='ckeditorImg' src=" + imageBase64 + "  ></p>"
            );
          });
          // 将图片转成base64格式
          reader.readAsDataURL(imageData);
          editor.isImg = true;
          editor.imgUrl = reader.result;
          return editor;
        }
      });
    }
  };
  b = "simpleupload";
  CKEDITOR.plugins.add(b, {
    init: function (editor) {
      editor.addCommand(b, a);
      editor.ui.addButton("simpleupload", {
        label: "添加图片", //鼠标悬停在插件上时显示的名字
        icon: "plugins/simpleupload/uploadImg.png", //自定义图标的路径
        command: b,
        id: "simpleupload"
      });
    }
  });
})();