Editor Markdown v3.9.3+

Originalmente utilizado simplemde-markdown-editor como editor de markdown, pero esta biblioteca no se ha actualizado ni mantenido desde hace mucho tiempo, y también existe el riesgo de xss. Así que después de la versión v3.9.3+, usa tui.editor como el nuevo editor. Todos los documentos siguientes están basados en tui.editor. Más contenido.

Propiedades

Nombre Tipo Predeterminado Descripción
value String " " Esta propiedad puede cambiar el contenido del editor. Si estás usando v-model, no lo uses.
options Object following defaultOptions Opciones de tui.editor. Esto es para inicializar tui.editor.
height String '300px' Esta propiedad puede controlar la altura del editor.
mode String 'markdown' Esta propiedad puede cambiar el modo del 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'
  ]
}

Métodos

  • setValue
  • getValue
  • setHtml
  • getHtml

Ejemplo

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

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

Ejemplo en Linea

enlace