vue-element-admin/docs/feature/component/markdown-editor.md

Markdown Editor

Originally used simplemde-markdown-editor as the markdown editor, but this library has not been updated and maintained for a long time, and there is also the risk of xss. So after the version, use tui.editor as the new editor. All the next documents are Based on tui.editor it. More Content.

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