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) | | clear-float | boolean | false | Muestra el botón "Limpiar flotantes" (opt-in) | | editor-id | string | null | Identificador estable del editor para la configuración central (ver abajo). Sin id solo se aplican las opciones de portal y globales, y el editor no se registra | | central | boolean | true | false = no consultar la configuración central (con o sin editor-id) | | central-url | string | '/ledithor/config' | Ruta del propio portal que sirve la configuración central |

Identificar el editor (importante para la configuración central)

La configuración central de Ledithor (CRUD en Atenea) puede activar o desactivar funcionalidades por portal sin que el portal haga nada, pero para darle una excepción a un editor concreto hace falta un id estable. En un portal Vue (y en cualquier editor creado con JS) Ledithor no puede inferirlo con fiabilidad, así que hay que indicarlo:

<LedithorEditor v-model="body" editor-id="noticia.cuerpo" />

Con editor-id, el editor consulta la ruta del propio portal (/ledithor/config, que sirve el bundle lefebvre; el navegador nunca habla con Atenea) y espera como mucho ~2,5 s antes de crearse; lo que responda manda sobre las props. Sin esa ruta (portal sin el bundle o con la central desactivada), con error o con timeout, el editor se crea con sus props de siempre. Detalle en el README del bundle, apartado «Configuración central».

• En HTML con auto-init: data-ledithor-id="noticia.cuerpo". En JS: Ledithor.createWithCentral(el, { editorId: 'noticia.cuerpo' }) (devuelve una promesa; Ledithor.create sigue siendo síncrono y no consulta la central; createWithCentral sin editorId solo aplica lo de nivel portal). Las tres formas son equivalentes (las de Symfony usan ledithor_id en el FormType).
• Elige un id que no cambie al refactorizar (no uses nombres de componente o de fichero): si cambia, el CRUD lo verá como un editor nuevo y perderá la configuración del antiguo.
• Sin id el editor sigue funcionando y recibe las opciones de nivel portal y globales y el kill_switch («Herramientas IA apagadas»); no se registra en Atenea ni puede tener una excepción propia. Para eso es el id.
• No pongas datos del usuario ni del contenido en el id.

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