Componente

Introducción

Este componente renderizará un input de tipo markdown editor. El mismo se compone de dos partes, una de renderizado y otra de lógica (IrMarkdown Bone), esta ultima será la encargada de el manejo de los datos.

Uso

Es importante recalcar el nombre del componente IrMarkdown a nivel de código, ya que este deberá usarse para llamar al componente para renderizarlo, ya sea individiualmente o en un IrForm.

Ejemplo

Propiedades

Todas las propiedades se pueden obtener desde la librería utilizada: v-md-editor - Propiedades (opens new window)

Código fuente

<template>
  <ir-markdown-bone
    v-bind="$attrs"
  >
    <div
      slot-scope="{
        height,
        value,
        leftToolbar,
        rightToolbar,
        toolbars,
        fullscreen,
        noresize,
        disabledMenus,
        leftAreaVisible,
        leftAreaTitle,
        leftAreaWidth,
        leftAreaReverse,
        mode,
      }"
    >
      <vue-markdown-editor
        :value="value"
        :height="height"
        :left-toolbar="leftToolbar"
        :right-toolbar="rightToolbar"
        :toolbars="toolbars"
        :fullscreen="fullscreen"
        :noresize="noresize"
        :disabled-menus="disabledMenus"
        :left-area-visible="leftAreaVisible"
        :left-area-title="leftAreaTitle"
        :left-area-width="leftAreaWidth"
        :left-area-reverse="leftAreaReverse"
        :mode="mode"
        @change="(text, _) => $emit('input', text)"
      />
    </div>
  </ir-markdown-bone>
</template>

<script>
import IrMarkdownBone from './IrMarkdownBone.vue'

// Editor principal
import VueMarkdownEditor from '@kangc/v-md-editor';
import '@kangc/v-md-editor/lib/style/base-editor.css';

// Tema vuepress
import vuepressTheme from '@kangc/v-md-editor/lib/theme/vuepress.js';
import '@kangc/v-md-editor/lib/theme/style/vuepress.css';

// Idioma
import esES from '@kangc/v-md-editor/lib/lang/es-ES.js';

VueMarkdownEditor.use(vuepressTheme/* , {
  Prism,
} */);

VueMarkdownEditor.lang.use('es-ES', esES);

export default {
  name: 'IrMarkdown',
  components: {
    IrMarkdownBone,
    VueMarkdownEditor,
  }
}
</script>