MarkDown编辑器设置图片大小

一、概述

当集成Editor.md编辑器的时候发现不能像简书那样动态的设置图片的尺寸。但是可以做如下的修改实目前编辑过程中根据设置展示尺寸。
参考CSDN 当需要图片大小时可以如下

![图片描述](url =100x100)

而Editor.md如下

![图片描述](url)

二、修改步骤

第一找到marked.min.js这个文件
然后定位Renderer.prototype.image 这个就是生成图片html的位置,原代码如下:

Renderer.prototype.image = function(href, title, text) {
            var out =  <img src="  + href +  " alt="MarkDown编辑器设置图片大小"> + text +  " ;
            if (title) {
                out +=   title="  + title +  " 
            }
            out += this.options.xhtml ? "/>" : ">";
            return out
        }

简单修改一下:

Renderer.prototype.image = function(href, title, text) {
            var array = href.split("=");
            var width;
            var height;
            if(array.length == 2){
                href = array[0];
                var resolution = array[1].split("x");
                if (resolution.length == 2){
                    width = resolution[0]
                    height = resolution[1];
                }
            }
            var out =  <img src="  + href +  " alt="MarkDown编辑器设置图片大小"> + text +  " ;
            if (title) {
                out +=   title="  + title +  " 
            }
            if(width){
                out +=   width="  + width +  " 
            }
            if(height){
                out +=   height="  + height +  " 
            }
            out += this.options.xhtml ? "/>" : ">";
            return out
        };

详情参考官网:https://pandao.github.io/editor.md/examples/index.html

© 版权声明
THE END
如果内容对您有所帮助,就支持一下吧!
点赞0 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容