Vditor markdown 图片增加尺寸的解决方法

Vditor 使用 Markdown 语法，在 Markdown 标准里，并没有定义图片的尺寸，这里给出如何自定义图片的尺寸。

扩展 markdown 语法：

![图片](a.jpg){width=100px}

约定图片地址后紧跟着{} 之间为图片的尺寸，中间不能有空格。这是我在 https://kmath.cn 使用的代码

在页面渲染时，（如果使用 jquery 可以使用 $(document).ready() 或者使用 vditor 的 preview 渲染完成时间来操作。）

基本思路：就是遍历 img 标签，同时使用 nextSibling 获取紧挨着图片的文字，如果该文字后面第一个字符是{ 并且包含了 } 则提取 其中的文本。

如果修改源代码可以在 \src\ts\markdown\mediaRender.ts 修改

 /* markdown 增加图片尺寸，只支持 width */

/* 情况①图片尺寸后跟的是文本 ：  

输入：  ![图片](a.jpg){width=100px}   markdown很好用  <br>  
输出：  <img  src=a.jpg width=100px>  markdown很好用
*/



/*情况②图片尺寸后跟的是HTML标签 ：
输入： ![图片](a.jpg){width=100px}    <p>标题</p>  
输出： <img  src=a.jpg width=100px>  <p>标题</p> 

*/


    element.querySelectorAll("img").forEach((imgElement) => {
  
        let next= imgElement.nextSibling ;   

        if(next!=null)
        {
            let hello=next.textContent;        
            var start = hello.indexOf("{")
            var end = hello.indexOf("}")
            var width = "0";

            if (start == 0 && end > 0) { 

             var sub = hello.substring(start + 1, end);
             width=sub.split('=')[1].trim();
             imgElement.setAttribute("width",width);
         
                //REMOVE START 
               let next2 = next.nextSibling;  
                    if (next2 != null) {
                        next.remove();
                    } else {
                        next.remove();
                        var remain = hello.substring(end + 1); 
                        imgElement.after(remain); 
                    }
               // REMOVE END
                

            } 
        }
  
  
    });


​