目录层级
下载源码
github地址
把压缩包下载下来解压,可以看到这个项目有多个文件夹和文件
- css这些文件夹就没什么好说的,基本是一些样式
- plugins文件夹是一些预设的插件,当然我们不改这里,因为我们不用插件
- editormd.js和editormd.min.js是一样,是最重要的js依赖,我们会改这里的源码
需求说明
我们需要点击工具栏,原编辑器点击是弹窗输入图片url,现需要点击实现本地图片转base64编码插入当前编辑器。
改动源码
打开editormd.js
editormd.defaults = {
....
// 编辑器的语言配置
lang: {
name: "zh-cn",
....
toolbar: {
// 编辑器的鼠标悬停标签提示,我们修改成有关的信息
image: "添加图片转为Base64编码",
.....
}
}
image: function () {
// 我们会在编辑器所在页面会添加input元素用来选择文件
$("#imageToBase64").click();
}
}
input元素点击后的函数,addImg函数是input的onchange函数,也就是input一旦选择图片后,就会触发onchange事件
//添加图片
function addImg(obj) {
var id = $(obj).attr("id");
var file = obj.files[0];
//图片不存在
if (file === undefined) {
return;
}
var reader = new FileReader();
reader.onloadend = function () {
var base64 = reader.result.toString();
//压缩
compress(base64, callback1);
obj.outerHTML = obj.outerHTML;//清空input的选择状态
//将base64编码插入进编辑器
function callback1(base64) {
editor.insertValue("![image](" + base64 + ")");
editor.insertValue("\n");
}
};
if (file) {
reader.readAsDataURL(file);
}
}
//压缩base64
function compress(base64, callback) {
var newImage = new Image();
var quality = 0.6; //压缩系数0-1之间
newImage.src = base64;
newImage.setAttribute("crossOrigin", 'Anonymous'); //url为外域时需要
var imgWidth, imgHeight;
newImage.onload = function () {
imgWidth = this.width;
imgHeight = this.height;
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width = imgWidth;
canvas.height = imgHeight;
quality = 0.1;
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(this, 0, 0, canvas.width, canvas.height);
var base64 = canvas.toDataURL("image/jpeg", quality); //压缩语句
// 如想确保图片压缩到自己想要的尺寸,如要求在50-150kb之间,请加以下语句,quality初始值根据情况自定
base64 = canvas.toDataURL("image/jpeg", quality);
// 防止最后一次压缩低于最低尺寸,只要quality递减合理,无需考虑
// while (base64.length / 1024 < 50) {
// quality += 0.001;
// base64 = canvas.toDataURL("image/jpeg", quality);
// }
console.log(base64.length)
callback(base64);//必须通过回调函数返回,否则无法及时拿到该值
}
}
我们创建一个编辑器,我们改动的是editormd.js,所以加这个依赖哦
//引入依赖
<script src="../assets/editor.md/editormd.js"></script>
//创造编辑器
function createEditor(editor) {
editor = editormd("editor", {
height: innerHeight, //设置高度
path: "../assets/editor.md/lib/", // 依赖位置
saveHTMLToTextarea: true, //自动生成html格式的源码,在<textarea name="{editor-id}-html-code">里面
toolbarIcons: "full", //加载全部工具栏,这也是默认值
emoji: true, //使用表情
codeFold: true, //代码折叠
tocm: true, //开头使用[TOCM]会创建下拉菜单
tocDropdown: true //开头用[TOC]也会创建下拉菜单,默认[TOC]只会创建层级表
});
return editor;
}
评论区