ledithor-vue

Componente Vue 3 para Ledithor, el editor de texto enriquecido de Lefebvre El Derecho. Con toolbar completa, temas visuales, edición HTML fuente e integración con CodeMirror.

Instalación

npm install ledithor-vue

Uso básico

<script setup>
import { ref } from 'vue';
import { LedithorEditor } from 'ledithor-vue';

const contenido = ref('');
</script>

<template>
  <LedithorEditor v-model="contenido" />
</template>

Uso en un formulario

<script setup>
import { ref } from 'vue';
import { LedithorEditor } from 'ledithor-vue';

const form = ref({ titulo: '', cuerpo: '' });

function enviar() {
  // form.value.cuerpo contiene el HTML generado por el editor
}
</script>

<template>
  <form @submit.prevent="enviar">
    <input v-model="form.titulo" type="text" placeholder="Título" />
    <LedithorEditor v-model="form.cuerpo" />
    <button type="submit">Guardar</button>
  </form>
</template>

Props

| Prop | Tipo | Default | Descripción | |------|------|---------|-------------| | modelValue | string | '' | Contenido HTML del editor (usar con v-model) | | toolbar | string | 'full' | Preset de toolbar: minimal, basic, standard, full | | theme | string | null | Clase CSS del tema, p.ej. le-theme-civil | | placeholder | string | 'Escribe aquí...' | Texto placeholder | | min-height | string | null | Altura mínima del editor, p.ej. 200px | | max-height | string | null | Altura máxima del editor, p.ej. 600px | | statusbar | boolean | true | Muestra la barra de estado inferior con contador de palabras y caracteres | | html-source | boolean | true | Muestra el botón de edición HTML fuente (powered by CodeMirror) |

Presets de toolbar

| Preset | Descripción | |--------|-------------| | minimal | Negrita, cursiva, subrayado | | basic | Formato de texto y listas | | standard | Basic + enlaces, imágenes, tablas | | full | Todas las herramientas disponibles |

Ejemplos

Editor compacto

<LedithorEditor
  v-model="contenido"
  toolbar="basic"
  min-height="150px"
  max-height="300px"
  :statusbar="false"
  :html-source="false"
/>

Editor completo con tema

<LedithorEditor
  v-model="contenido"
  toolbar="full"
  theme="le-theme-civil"
  min-height="300px"
/>

Fallback automático

Si el editor falla al inicializarse por cualquier motivo, el componente muestra automáticamente un <textarea> funcional para que el usuario pueda seguir trabajando sin interrupciones.

Requisitos

• Vue 3.x

Licencia

Propietaria — Lefebvre El Derecho