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

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;
});

最终效果如图

评论列表

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