周梦康 发表于 2017-11-27 826 次浏览 标签 : mditor

免费领取阿里云优惠券 我的直播 - 《PHP 进阶之路》

mditor 是同事弄的一个 markdown 编辑器,所以遇到问题也好解决。主页地址 https://github.com/Houfeng/mditor

最新更新的 1.33 版本新增两个事件渲染预处理和渲染后处理,这主要是为了解决使用者在编辑器渲染中的一些个性化需求。

var mditor = Mditor.fromTextarea(document.getElementById("markdown-textarea"));
mditor.on('ready', function () {
    var mathJaxContainer = {};
    mathJaxContainer.ele = [];

    mathJaxContainer.input = function (match) {
        mathJaxContainer.ele.push(match);
        return "{mathJaxContainer["+ (mathJaxContainer.ele.length-1) +"]}";
    };

    mathJaxContainer.output = function (match,i) {
        return mathJaxContainer.ele[i];
    };

    mditor.viewer.$on('beforeRender',function (event) {
        if(!event.value)return
        event.value = event.value.replace(/(\${1,2})(.+?)\1/g,mathJaxContainer.input);
        event.value = event.value.replace(/(\${2})[\S\s]*?\1/mg,mathJaxContainer.input);
    });

    mditor.viewer.$on('afterRender',function (event) {
        if(!event.value)return
        event.value = event.value.replace(/\{mathJaxContainer\[(\d+)\]\}/g,mathJaxContainer.output);
        mathJaxContainer.ele = [];
    });
    
    // 手动给 viewer 赋值,确保上面绑定的事件能够在初始化的时候执行
    mditor.viewer.value = mditor.editor.value;
});

最终效果如图

嗨,老铁,欢迎来到我的博客!

如果觉得我的内容还不错的话,可以关注下我在 segmentfault.com 上的直播。我主要从事 PHP 和 Java 方面的开发,《深入 PHP 内核》作者之一。

[视频直播] PHP 进阶之路 - 亿级 pv 网站架构的技术细节与套路 直播中我将毫无保留的分享我这六年的全部工作经验和踩坑的故事,以及会穿插着一些面试中的 考点难点加分点

评论列表

回复 路人甲 2017-12-20 17:12:06
12