目录层级

下载源码
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;
}

效果展示