MỘT VÀI CÂU HỎI VỀ THƯ VIỆN SIMPLE MDE SỬ DỤNG TRONG VIBLO

Bạn trình bày câu hỏi hại não quá!

SimpleMDE là Markdown editor, nó base trên CodeMirror và bộ markdown parse có tên là marked.

Hai vấn đề bạn đang gặp phải là:

1. Click toolbar icon => Thay đổi nội dung hiển thị ra từ markdown. (Thay đổi thẻ anchor)
2. Hiển thị html trong tài liệu markdown mà người dùng nhập. (Code html không nằm trong ``` theo cú pháp markdown)

Tất cả vấn đề này chung quy chỉ là render markdown thành html. Giải pháp, custom bộ render preview mặc định của SimpleMDE thay vì cách như bạn đang nghĩ.

Bạn có thể sử dụng bộ render markdown của Viblo trong Viblo SDK (javascript) tại: https://github.com/viblo-asia/sdk-js ; Hoặc tự custom theo document của SimpleMDE, sử dụng vẫn sử dụng marked hoặc markdown-it. Btw, bạn cũng có thể tham khảo các OpenSource khác của Viblo tại: https://viblo.asia/tools.

Updated: Sr mn, mình có chút nhớ nhầm. Bộ parse mặc định là marked chứ ko phải markdown-it

SMDE có một option tên là previewRender để bạn tự dùng renderer mình muốn, không cần tự replace HTML bằng tay. Mặc định thì nó dùng marked. Viblo thì dùng markdown-it. Source code markdown renderer của Viblo thì ở đây https://github.com/viblo-asia/sdk-js/tree/master/src/markdown.

Cái SimpleMDE thì bạn dùng thế này.

const simplemde = new SimpleMDE({
    previewRender: content => md.render(content)
})

Còn thêm target="_blank" vào link thì bạn customize markdown-it như này.

const defaultRenderer = md.renderer.rules.link_open || ((tokens, idx, options, env, self) => self.renderToken(tokens, idx, options));

md.renderer.rules.link_open = (tokens, idx, options, env, self) => {
    const token = tokens[idx];
    const targetIndex = token.attrIndex('target');

    if (targetIndex < 0) {
        token.attrPush(['target', '_blank']);
    } else {
        token.attrs[targetIndex][1] = '_blank;
    }

    return defaultRenderer(tokens, idx, options, env, self);
};