Editor.md修改图片连接使其自动识别宽高

发布于 2023-03-30  753 次阅读


1.修改 marked.js文件内容

editormd.js

我们可以通过搜索markdownToHTML关键词找到editor.md中转换的方法

然后往下翻可以看到是使用了marked.js来进行了转换

marked.js

找到位于/lib/marked.min.js的js文件
然后搜索关键词 "img",找到其所在的位置,我们发现这里传进来了三个参数分别是href,title,text

我们只用到href这个参数,接下来就通过该参数来改造吧
想要实现的效果,

![](xxxxxxx.jpg?w=200&h=200)

能够自动把图片转为

<img style="width:200px;height:200px" />

为了安全保证,我顶一个了一个变量,用于存储允许通过querystring方式传进来的样式名

var lsStyleImgAttr = {
    w: 'width',//宽度
    h: 'height',//高度
    f: 'float',//浮动
}

在文件顶部,插入一个方法,用于生成并返回style

function SetImgAttr(_href) {
    var num = _href.indexOf("?")
    var str = _href.substr(num + 1); //取得所有参数  
    str = str.replace('&', '&');
    var arr = str.split("&"); //各个参数放到数组里
    var _result = "";
    var _style = "";
    for (var i = 0; i < arr.length; i++) {
        num = arr[i].split('=');// arr[i].indexOf("=");
        if (num.length == 2) {
            if (!lsStyleImgAttr[num[0]]) continue;

            _style += lsStyleImgAttr[num[0]] + ':' + num[1]+';'
        }
    }
    _result = _style.length > 0 ? 'style="' + _style + '"' : '';
    return _result
}

接着修改<img 这个标签属性

接下来就是测试啦

2.使用

使用的时候,只需要在上传后的图片后面加上?w=xxx&h=xxx&f=left 之类的

![](xxxxx.jpg?w=200&h=100&=float)

然后看一下效果

大工告成!

啊~~~~~~~~~
最后更新于 2023-03-30