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

2025/5/12 1:24:25 来源：https://blog.csdn.net/m0_65041204/article/details/139993997 浏览: 次关键词：【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;}// 大小不能超过2Mif (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"});}});
})();