Markdown 编辑器 v3.9.3+

本来使用 simplemde-markdown-editor 作为 markdown 编辑器,但这个库很久不更新和维护了,而且还有 xss 风险。所以在 v3.9.3+ 版本之后使用 tui.editor作为新的编辑器,接下来所有的文档都是基于 tui.editor 它的。更多内容

Props

Name Type Default Description
value String " " This prop can change content of the editor. If you using v-model, don't use it.
options Object following defaultOptions Options of tui.editor. This is for initailize tui.editor.
height String '300px' This prop can control the height of the editor.
mode String 'markdown' This prop can change mode of the editor. (markdownor wysiwyg)
language String 'en_US' i18n
const defaultOptions = {
  minHeight: '200px',
  previewStyle: 'vertical',
  useCommandShortcut: true,
  useDefaultHTMLSanitizer: true,
  usageStatistics: false,
  hideModeSwitch: false,
  toolbarItems: [
    'heading',
    'bold',
    'italic',
    'strike',
    'divider',
    'hr',
    'quote',
    'divider',
    'ul',
    'ol',
    'task',
    'indent',
    'outdent',
    'divider',
    'table',
    'image',
    'link',
    'divider',
    'code',
    'codeblock'
  ]
}

Methods

  • setValue
  • getValue
  • setHtml
  • getHtml

Example

<template>
  <markdown-editor v-model="content" />
</template>
<script>
import MarkdownEditor from '@/components/MarkdownEditor'

export default {

  data() {
    return {
      content: '',
    }
  }
}
</script>

Online Example

link