MarkDown编辑器设置图片大小

2022-01-01  本文已影响0人  放羊娃华振

一、概述

当集成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="' + 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="' + 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

上一篇下一篇

猜你喜欢

热点阅读