Código de JavaScript - Editor de texto con opciones básicas

Pos: 4

Val: 2.019

Ha mantenido su posición en JavaScript (en relación al último mes)

Editor de texto con opciones básicas

JavaScript

(7)

Actualizado el 22 de Febrero del 2020 por Scriptshow (141 códigos) (Publicado el 10 de Diciembre del 2016)

10.062 visualizaciones desde el 10 de Diciembre del 2016

Sencillo Editor basado en "execCommand" incluido en JavaScript. Simplifica bastante el código necesario para ciertos comandos; estos comandos son ampliables siguiendo instruciones y documentación sobre "execCommand".
Es compatible con la mayoría de navegadores, con escasas diferencias. Se ha utilizado a lo largo de años para construir editores más sofisticados.

Es útil para experimentar y ver resultados. Puede ser adaptable con CSS-Style a pequeños proyectos. En fin...

Un saludo

Requerimientos

Un navegador web y/o dispositivo compatible.

1.0
(7)

Actualizado el 22 de Diciembre del 2016 (Publicado el 10 de Diciembre del 2016)

gráfica de visualizaciones de la versión: 1.0

10.063 visualizaciones desde el 10 de Diciembre del 2016

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>Content Editable</title>

<style>

#txtbox, #text {

width:800px;

height:400px;

padding:10px;

overflow:scroll;

background:#EFEFEF;

border:0px none;

#text {

display:none;

button, input, select {

background:#EFEFEF;

border:#000000 none solid;

</style>

<script>

function init(x) {

if (x=="h") {document.getElementById('txtbox').style.display='none';document.getElementById('text').style.display='block';}

if (x=="s") {document.getElementById('txtbox').style.display='block';document.getElementById('text').style.display='none';}

document.getElementById('text').value=document.getElementById('txtbox').innerHTML;

if (x!="h" || x!="s") document.execCommand(x,false,null);

document.getElementById('txtbox').focus();

</script>

</head>

<body>

<p style="width:800px;height:auto;padding:10px;background:#EFEFEF">

<button onclick="init('bold')">Negrita</button>

<button onclick="init('italic')">Itálica</button>

<button onclick="init('underline')">Subrayado</button>

<button onclick="init('justifycenter')">Centrado</button>

<button onclick="init('increasefontsize')">Fuente +</button>

<button onclick="init('inserthorizontalrule')">Línea Hr.</button>

<button onclick="init('redo')">Rehacer</button>

<button onclick="init('undo')">Deshacer</button>

<button onclick="init('s')">Vista Real</button>

<button onclick="init('h')">Vista HTML</button>

</p>

<div id="txtbox" contenteditable="true">

<h2>Título</h2>

<p>Escribe aquí ...</p>

<p>Etc ...</p>

</div>

<textarea id="text" name="text"></textarea>

</body>

</html>

Comentarios sobre la versión: 1.0 (7)

xve

11 de Diciembre del 2016

No ha dejado ningún comentario

Responder

Manuel

12 de Diciembre del 2016

:-D gracias

Responder

Alejandro

22 de Diciembre del 2016

No ha dejado ningún comentario

Responder

anonymous

20 de Marzo del 2017

sabes que me diste una idea men

Responder

vffjjfejfjf

10 de Junio del 2019

No ha dejado ningún comentario

Responder

WCr

21 de Mayo del 2020

No ha dejado ningún comentario

Responder

Nelson Rivera

26 de Marzo del 2023

Muchas gracias por compartir este código. Lo sentí como agua en el desierto.

Responder

Comentar la versión: 1.0

http://lwp-l.com/s3803

Code Test - (Editor de código fuente)

Imagen de fondo JavaScript vs CSS3

Código de JavaScript - Editor de texto con opciones básicas

Requerimientos

1.0(7)

Comentarios sobre la versión: 1.0 (7)

Comentar la versión: 1.0

Tienes que ser un usuario registrado para poder insertar imágenes, archivos y/o videos.

1.0
(7)