Asked Aug 20th, 2018 3:21 PM 242 0 2
  • 242 0 2
+3

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

Share
  • 242 0 2

Chào mọi người em có vài câu hỏi về phần markdown trong viblo, em cũng có chức năng làm như thế này nên muốn hỏi mọi người cho ý kiến ạ.

Đầu tiên là em muốn bắt cái sự kiện khi mình click vào icon side-by-side để từ đó mình có thể chủ động replace những phần mình mong muốn như những đường link http thì cho vào 1 thẻ a có targe="_blank" hoặc những thẻ script với html thì convert nó thành string như của viblo.

Em có tìm hiểu và có config được

{ name: "side-by-side", action: SimpleMDE.toggleSideBySide, className: "fa fa-columns no-disable no-mobile",title: "Toggle Side by Side",},

trong action em có gọi đến hàm SimpleMDE.toggleSideBySide thì đấy là kiểu mặc định. Nhưng nếu mình bỏ hàm đấy đi thì xử lý lại hết những phần convert hết thì lại mệt quá.

Mọi người có cách nào vừa giữ lại được hàm mặc định để convert những ký hiệu như #, ** vv.. và vừa có thể tự config những thẻ link với script ko ạ.

Em thấy viblo làm phần này rất hay. Mong mọi người cho em kinh nghiệm về phần này được ko ạ. Em cảm ơn ạ

2 ANSWERS


Answered Aug 21st, 2018 1:38 AM
Accepted
+1

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 😄

Share
Aug 21st, 2018 2:15 AM

@huukimit Cảm ơn bạn đã trả lời câu hỏi của mình.

  • Câu trả lời của bạn mình đã hiểu nhưng ý của mình là vẫn dữ bộ render mặc định của nó và chỉ custom lại những phần mình muốn thôi. chứ custom lại toàn bộ thì lại mất thời gian quá, bạn có cách nào chắp vá kiểu thế ko.

  • À mình muốn hỏi nữa là giờ Viblo đang lưu trong DB là dạng markdown hay html vậy bạn. và khi trả về cho App mình mới render rồi trả lại hay sao bạn nhỉ. và nếu lưu kiểu markdown thì khi render ra html trả về thì dùng thư viện nào vậy bạn.

  • Vì mình khi lưu thì lưu dạng html xong khi edit minhf dùng thư viện turndownService để convert lại thành dạng markdown nên nó xảy ra nhiều lỗi và những ký hiệu nó khác nhau quá. Cảm ơn bạn nhiều

0
| Reply
Share
Aug 21st, 2018 3:19 AM

@mih2t9x Sr bạn, để mình nói rõ hơn vụ custom bộ render nhé. Như mình có nói

  1. SMDE dùng markdown-it để parse markdown. Bạn custom lại phần render dùng marked tức chính là dùng bộ render markdown mặc định của SMDE. Còn cách dùng marked hay markdown-it để render bạn vui lòng đọc documentation giúp mình nhé. => Mất rất ít thời gian và dễ dàng mở rộng thêm nhiều.
  2. Với câu hỏi về html, mình đã trả lời bạn trước đó tại https://viblo.asia/c/b85oWqqgO52. Bấm F12 bạn có thể thấy rõ Viblo gọi api trả về nội dung theo cú pháp markdown mà người dùng nhập. => Thật rõ ràng là Viblo lưu markdown vào DB rồi.
+2
| Reply
Share
Answered Aug 21st, 2018 5:10 AM
+3

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);
};
Share
Avatar Huu Hung @huuhung96
Sep 13th, 2018 2:08 PM

Nhân tiện có chủ đề liên quan về viblo, không biết web viblo đc code chính bằng ngôn ngữ gì nhỉ? Hình như không phải Ruby

0
| Reply
Share
Viblo
Let's register a Viblo Account to get more interesting posts.