美文网首页
MarkDown编辑器设置图片大小

MarkDown编辑器设置图片大小

作者: 放羊娃华振 | 来源:发表于2022-01-01 00:19 被阅读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

    相关文章

      网友评论

          本文标题:MarkDown编辑器设置图片大小

          本文链接:https://www.haomeiwen.com/subject/ypxoqrtx.html