Prueba NGTextEditor
Prueba todas las funciones en tiempo real
Cómo usar el editor
Un editor basado en bloques con cuadrícula de posicionamiento
Este editor funciona con un sistema de bloques posicionados en una cuadrícula de 12 columnas. A diferencia de un editor clásico donde puedes escribir inmediatamente, primero debes crear un bloque para comenzar a escribir tu contenido.
Crea tu primer bloque
- Haz clic derecho en cualquier lugar del área de edición
-
Aparece un menú con dos opciones:
- Bloque de texto : para escribir texto, crear listas, insertar citas, etc.
- Bloque multimedia : para insertar imágenes, videos, tablas o columnas
- Elige el tipo de bloque deseado
- Se abre una ventana para configurar el ancho del bloque (del 10% al 100% del ancho disponible)
- Confirma: aparece una cuadrícula visual para elegir la ubicación de tu bloque
- Haz clic en la posición deseada en la cuadrícula, y puedes comenzar a escribir o insertar contenido
La cuadrícula de posicionamiento
Al crear o mover un bloque, aparece una cuadrícula visual:
- Celdas verdes : posiciones disponibles para colocar tu bloque
- Celdas rojas : posiciones ocupadas por otros bloques
- "Insertar una fila aquí" : zonas clicables entre filas existentes para crear una nueva fila en ese lugar
- "Nueva fila" : en la parte inferior de la cuadrícula, para añadir una fila después de las filas existentes
Reposicionar o configurar un bloque
Cada bloque tiene un botón de engranaje (⚙) en la parte superior izquierda. Este único botón agrupa todas las opciones:
- Reposicionar el bloque en la cuadrícula
- Modificar el ancho del bloque
- Añadir o modificar una imagen de fondo
- Eliminar el bloque
Esta interfaz limpia con un solo botón mantiene el área de edición despejada.
¿Por qué este sistema?
Este enfoque de bloques y cuadrícula te permite:
- Organizar tu diseño con precisión usando la cuadrícula de 12 columnas
- Colocar elementos uno al lado del otro (por ejemplo, una imagen al 50% junto a texto al 50%)
- Reorganizar fácilmente tus contenidos mediante el botón de configuración
- Estructurar tu documento de manera flexible
- Exportar a HTML y PDF de forma fiable y fiel a lo editado
Consejos
Ver tutoriales en vídeo
- Usa el botón "Contornos de bloques" en la barra de herramientas para visualizar los límites de tus bloques (azul para texto, verde para multimedia)
- Puedes anidar un bloque dentro de otro bloque para diseños complejos
- Los bloques se posicionan automáticamente en la cuadrícula: si no hay espacio suficiente en una fila, el bloque pasará a la siguiente fila
Prueba el editor a continuación
Vista previa en directo
Solo lecturaEl contenido del editor aparecerá aquí en tiempo real...
Integración en 3 pasos
<!-- Importa los archivos -->
<link
rel="stylesheet"
href="NGTextEditor.min.css"
>
<script
src="NGTextEditor.min.js"
></script>
<!-- Añade la clase -->
<textarea
class="ngeditor"
id="my-editor"
data-ngte-config="/config/mon-editeur.json" ></textarea>
data-ngte-config="/config/mon-editeur.json" ></textarea>