站长  发布于 2024-06-12 23:13:40  阅读(202)  点赞(1)  评论(0)

    由于boostrap-markdown的默认解析器markdown.js不支持回车换行等、输入标签等一些特性,所以决定给他换一个解析器。一开始准备用marked.js但是发现他不支持IE,最后用了markdown-it.js实现了想要的效果。

    上代码,自定义解析器:

function htmlParser(val) {
    var content = "";
    if (val) {
        //将每行开头的空格替换为 ,解决空格会被解析掉的问题
        var re = /^ +/gm;
        var val = val.replace(re, function (item) {
            return item.replace(/ /g, " ");
        });
        var md = new markdownit("default", {
            breaks: true,
            langPrefix:"brush:"
        });
        content = md.render(val);
    }
    return content;
};

    boostrap-markdown初始化时使用自定义的解析器:

var editor = $("#comment");
editor.markdown({
    height: 285,
    language: "zh",
    footer: "<button type=\"submit\" class=\"btn btn-sm btn-primary\">提交评论</button>&nbsp;&nbsp;<span id=\"commentAlert\" class=\"red-alert\"></span>",
    parser: htmlParser,
    onShow: function () {
        $("#comment").on("scroll", function () {
            utility.autoHeight(this);
        });

        $("#comment").on("change", function () {
            utility.autoHeight(this);
        });

        $("#comment").after("<div class=\"invalid-feedback mt-0 pt-1 pb-1\" style=\"background:#fff;\">请填写评论内容</div>");
    }
});

    最终实现效果如下:

    输入内容:

image.png

    markdown-it.js解析后的预览效果:

image.png

评论列表
发表评论
请填写昵称