- vừa được xem lúc

MdEditorV3, Markdown editor cho dự án sử dụng Vue3

#md-editor-v3

0 0 5

Người đăng: Bùi Huy Hoàng

Theo Viblo Asia

Mở Đầu

xin chào các bạn cũng đã rất lâu rồi mình mới lại ra bài mới 😄, trong quá trình làm dự án mới mà mình tham gia có sử dụng Vue3 và cần chức năng liên quan đến markdown editor và tình cờ mình phát hiện ra em md-editor-v3 này 😄. Thực ra là vì dùng vue3 nên nhưng package trước mà mình sử dụng thì đến dự án này lại không dùng được :v. Vậy để xem nó có gì hay ho nhá.

Cài đặt

Cũng như các package khác thôi mình dùng yarn lên chỉ cần chạy

yarn add md-editor-v3

Sau khi cài đặt xong thì mình sẽ tạo một component để khi nào cần dùng đến nó thì mình sẽ gọi ra và sử dụng thôi, về cơ bản component của mình sẽ như thế này, tùy vào nhu cầu sử dụng thì các bạn có thể custom lại nó

<template> <md-editor v-model="state.text" />
</template> <script setup lang="ts">
import { reactive } from 'vue'
import MdEditor from 'md-editor-v3'
import 'md-editor-v3/lib/style.css' const emit = defineEmits(['updateValue'])
MdEditor.config({ editorConfig: { languageUserDefined: { 'my-lang': { toolbarTips: { bold: 'bold', underline: 'underline', italic: 'italic', strikeThrough: 'strikeThrough', title: 'title', sub: 'subscript', sup: 'superscript', quote: 'quote', unorderedList: 'unordered list', orderedList: 'ordered list', task: 'task list', codeRow: 'inline code', code: 'block-level code', link: 'link', image: 'image', table: 'table', mermaid: 'mermaid', katex: 'formula', revoke: 'revoke', next: 'undo revoke', save: 'save', prettier: 'prettier', pageFullscreen: 'fullscreen in page', fullscreen: 'fullscreen', preview: 'preview', htmlPreview: 'html preview', catalog: 'catalog', github: 'source code', }, titleItem: { h1: 'Lv1 Heading', h2: 'Lv2 Heading', h3: 'Lv3 Heading', h4: 'Lv4 Heading', h5: 'Lv5 Heading', h6: 'Lv6 Heading', }, imgTitleItem: { link: 'Add Img Link', upload: 'Upload Img', clip2upload: 'Clip Upload', }, linkModalTips: { linkTitle: 'Add Link', imageTitle: 'Add Image', descLabel: 'Desc:', descLabelPlaceHolder: 'Enter a description...', urlLabel: 'Link:', urlLabelPlaceHolder: 'Enter a link...', buttonOK: 'OK', }, clipModalTips: { title: 'Crop Image', buttonUpload: 'Upload', }, copyCode: { text: 'Copy', successTips: 'Copied!', failTips: 'Copy failed!', }, mermaid: { flow: 'flow', sequence: 'sequence', gantt: 'gantt', class: 'class', state: 'state', pie: 'pie', relationship: 'relationship', journey: 'journey', }, katex: { inline: 'inline', block: 'block', }, footer: { markdownTotal: 'Word Count', scrollAuto: 'Scroll Auto', }, }, }, },
})
</script>

Sau khi thêm xong chúng ta sẽ có một markdown editor như thế này 😄

Mình thấy em nó có khá là đầy đủ các tính năng của một markdown editor, mọi người có thể vào doc của em nó để tìm hiểu thêm nhé, sau đây mình sẽ chỉ ra một số tính năng nổi bật của nó nhé.

  • Tùy chỉnh theme thành light hoặc dark
  • previewOnly : thuộc tính này mình thấy khá hay và nó rất hữu dụng trong trường hợp mình muốn hiển thị luôn nội dung
  • language: nó cũng hỗ trợ hiển thị theo nhiều ngôn ngữ khác nhau
  • Các tính năng có hỗ trợ cả phím tắt, tiện lợi cho người dùng
  • onUploadImg Hỗ trợ sự kiện upload ảnh
  • custom được toolbars: nó cũng cho phép chúng ta tùy chỉnh được thanh toolbars theo nhu cầu của từng dự án
  • Nó cũng hỗ trợ hiển thị công thức toán học: khá là tiện khi mình không phải cài thêm một package nào nữa 😄

Một số tips and tricks

Trong quá trình sử dụng package mình có rút ra được một vài lưu ý sau:

  • mình có 2 editor trong một màn hình và khi mình thực hiện bội đậm ở editor đầu tiên thì editor thứ 2 nó cũng thực hiện tương tự, vì vậy để phân biệt 2 editor với nhau thì chúng ta cần thêm thuộc tính editor-id vào các editor đó.
  • Có thể custom dễ dàng toolbars: chỉ cần sửa lại trong component như sau
 <md-editor v-model="state.text" > <template #defToolbars> <normal-toolbar title="Select image" class="d-flex items-center" > <template #trigger> \\ tính năng bạn muốn thêm vào toobars </template> </normal-toolbar> </template> </md-editor>
  • Một cái nữa rất quan trọng đó là editor này sẽ bị tấn công XSS vì thế nếu bạn không đảm bảo rằng các input nhập vào của bạn là an toàn thì bạn sẽ cần phải cài thêm một packagge khác để làm sạch các input nhập vào đó là sanitize. Sau khi cài đặt xong sanitize bạn cũng cần phải sửa lại trong component markdown editor như sau:
<template>
<MdEditor :sanitize="sanitize" />
</template> <script setup>
import MdEditor from 'md-editor-v3';
import 'md-editor-v3/lib/style.css';
import sanitizeHtml from 'sanitize-html'; const sanitize = (html) => sanitizeHtml(html);
</script>

Như vậy là chúng ta đã phòng chống được tấn công XSS, tuy nhiên sau khi thêm sanitize nó sẽ làm sạch input đầu vào và loại bỏ đi cả các thẻ image hay các thẻ hiển thị công thức toán học. SOS như vậy thì dùng editor này làm gì nữa @@, mình cũng đã từng đau đầu với nó, tuy nhiên package sanitize có thuộc tính allowedTags cho phép hiển thị các tag đươc khai báo trong đó và thuộc tính allowedAttributes để cho phép các thuộc tính nào sẽ được hiển thị trong thẻ đó. Vậy là chúng ta vẫn có thể hiển thị được các thẻ image, công thức toán học mà cũng không lo bị tấn công XSS.

Kết Luận

Trên đây là bài giới thiệu về MdEditorV3 một markdown editor rất đáng để sử dụng trong những dự án đang dùng vue3. Bài viết trên mình đã giới thiệu về cách cài đặt, các tính năng nổi bật cũng như một số vấn đề, lưu ý mà mình đã gặp phải trong quá trỉnh sử dụng. Hy vọng qua bài viết này sẽ giúp các bạn có thêm một lựa chọn trong việc sử dụng markdown editor. Mọi ý kiến đóng góp hay thắc mắc mọi người hãy comment xuống phía dưới để mình được biết nhé, nếu thấy bài viết hữu ích thì hãy cho minh một upvote nhé. Cảm ơn các bạn 😄

Bình luận