Buscar un código de JavaScript

Volver

Agregar Código Fuente

Mostrando del 1 al 10 de 522 coincidencias

<<>>

Se ha buscado por la cadena: editor

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.075 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

Pos: 2

Val: 3.162

Crear un editor WYSIWYG

JavaScript

(2)

Publicado el 21 de Septiembre del 2015 por Xve (294 códigos)

6.138 visualizaciones desde el 21 de Septiembre del 2015

En este código de ejemplo, muestro como crear un editor wysiwyg con el comando execCommand().

editor-wysiwyg

La lista de instrucciones posibles son:

backColor
Change the background color.

bold
Toggles bold text on and off.

copy
Copy selected text to clipboard.

createLink
Creates a link on selected text.

cut
Cut selected text and copy to clipborad.

delete
Delete the selected text.

fontName
Change the font family.

fontSize
Change the Font Size.

foreColor
Change the Font Color.

formatBlock
Format selection into a new block.

indent
Indent the selection.

insertHorizontalRule
Insert an <hr /> element.

insertHTML
Not supported by IE. Insert custom HTML strings.

insertImage
Insert an image element referencing an image file URI.

insertOrderedList
Insert an Ordered List element.

insertUnorderedList
Insert an Unordered List element.

insertParagraph
Insert a paragraph element.

italic
Toggles italicized text on and off.

justifyCenter
Center the selection.

justifyFull
Fully justify the selection.

justifyLeft
Left justify the selection.

justifyRight
Right justify the selection.

outdent
Outdent the selection.

paste
Paste contents of clipboard.

redo
Redo an Undo command.

removeFormat
Remove formatting from selection.

selectAll
Select everything within the content editable element.

strikeThrough
Strikes a line through the selection.

styleWithCSS
Style the selection with CSS.

subscript
Format the selection to subscript.

superscript
Format the selection to superscript.

underline
Toggles underline text on and off.

undo
Undo the last operation performed in the editable element.

unlink
Remove a link from the selection.

Pos: 4

Val: 2.019

Code Test - (Editor de código fuente)

JavaScript

(3)

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

3.191 visualizaciones desde el 19 de Octubre del 2016

Script para editar y probar código HTML, CSS, JavaScript, etc. online y offline. Pega el código y pulsa el botón. El resultado se muestra en una ventana. Muy fácil de manejar y compatible.

Pos: 4

Val: 2.019

Editor de Texto por secciones / etiquetas

JavaScript

(4)

Publicado el 28 de Mayo del 2017 por Scriptshow (141 códigos)

1.884 visualizaciones desde el 28 de Mayo del 2017

Podemos autorizar ó restringir la edición de texto con JavaScript. Este Script, actúa al clicar en una zona de texto que previamente está declarada dentro de una función...
Modificamos el texto por medio de un Textarea que, al perder el focus, se oculta y devuelve el resultado a la etiqueta que contiene dicho texto. Todo el proceso, se produce en tiempo real, en el lado cliente.
Puede tener diversas aplicaciones.

Espero sea útil.

Editor de Colores

JavaScript

(2)

Publicado el 24 de Mayo del 2002 por Juan R Monroy (3 códigos)

7.885 visualizaciones desde el 24 de Mayo del 2002

Funcion para cambiar el color de fondo colocando los valores RGB en un formulario.

Notificacion flotante

JavaScript

Publicado el 3 de Marzo del 2023 por Jefferson (11 códigos)

1.687 visualizaciones desde el 3 de Marzo del 2023

Notificaciones al estilo Toast flotante con retardo de ocultamiento

BOOTSTRAP DATA-TABLE DINAMICA FETCH

JavaScript

Publicado el 10 de Enero del 2023 por Jefferson (11 códigos)

1.527 visualizaciones desde el 10 de Enero del 2023

Suelo trabajar con Bootstrap y ya no queria usar JQuery para manejar la libreria DataTable.

Se que existen muchas librerias DataTable con Vanilla Javascript, Vue, React, etc..

Pero queria tener algo sencillo, de solo configurar 3-4 variables y armar mi datatable dinamica.

Pues bien como suelo usar Bootstrap me ahorre de hacer el css y solo me hice el js.

Lo publico por si alguien desea usarlo y/o se animan para crear un nucleo solido con funciones mas complejas.

Repito cualquier error por favor háganlo saber (que debo tener), ya que lo hice al paso y aun no lo uso en producción.

Generar password seguro

JavaScript

Publicado el 2 de Enero del 2023 por Jefferson (11 códigos)

503 visualizaciones desde el 2 de Enero del 2023

SCRIPT PARA GENERAR UN PASSWORD SEGURO

Incluye tres niveles
1) Debil
2) Fuerte
3) Muy fuerte

Todas las password generadas incluyen al menos
1 Numero
1 Mayuscula
1 Minuscula
1 Caracter especial
8 lenght

editor_code'><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous"
/>
<title>Generar Pass</title>
</head>
<body>
<section class="container mt-3">
<h1 class="text-center">
Genera tu password
<h5 class="text-center">
Incluimos Mayusculas, Minusculas, Numeros y Caracteres especiales
</h5>
</h1>
<hr />
<div class="row justify-content-around mt-3">
<div class="col-4">
<h4 class="text-center my-2 mb-4">Escoje cual contraseña</h4>
<div class="form-check form-check-inline">
<input
class="form-check-input"
type="radio"
name="sel"
id="i1"
value="1"
role="button"
/>
<label class="form-check-label" for="i1" role="button">Debil</label>
</div>
<div class="vr"></div>
<div class="form-check form-check-inline ms-2">
<input
class="form-check-input"
type="radio"
name="sel"
id="i2"
value="2"
role="button"
/>
<label class="form-check-label" for="i2" role="button"
>Fuerte</label
>
</div>
<div class="vr"></div>
<div class="form-check form-check-inline ms-2">
<input
class="form-check-input"
type="radio"
name="sel"
id="i3"
value="3"
role="button"
/>
<label class="form-check-label" for="i3" role="button"
>Muy Fuerte</label
>
</div>
<div class="row justify-content-center mt-4">
<button class="btn btn-primary">Generar</button>
</div>
</div>
<div class="vr bg-light border-end border-secondary"></div>
<div id="div_res" class="col-4 d-none">
<h2 id="dev" class="text-center border rounded p-3 shadow"></h2>
<div class="row mt-3">
<div class="col-4">
<span id="cop" class="btn btn-outline-dark">copy</span>
</div>
<div class="col-4">
<a
href="https://ciberprotector.com/comprobador-de-contrase%C3%B1as/"
target="_blank"
>Ciberprotector</a
>
</div>
<div class="col-4">
<a
href="https://delinea.com/resources/password-strength-checker"
target="_blank"
>Delinea</a
>
</div>
</div>
</div>
</div>
</section>
<script>
document
.querySelector(".btn-primary")
.addEventListener("click", function () {
let a;
div_res.classList.add("d-none");
dev.classList.remove(
"bg-danger",
"bg-secondary",
"bg-warning",
"text-light",
"text-warning",
"text-success"
);
document.querySelectorAll('[name="sel"]').forEach(function (e) {
if (e.checked) a = e.value;
});
if (a != undefined) {
1 == a
? dev.classList.add("bg-danger", "text-light")
: 2 == a
? dev.classList.add("bg-secondary", "text-warning")
: dev.classList.add("bg-warning", "text-success");
div_res.classList.remove("d-none");
dev.innerText = generar_pass(a);
}
});
const copyContent = async () => {
let text = document.getElementById("dev").innerText;
try {
await navigator.clipboard.writeText(text);
console.log("Content copied to clipboard");
} catch (err) {
console.error("Failed to copy: ", err);
}
};
cop.addEventListener("click", copyContent);
/* CODIGO GENERAR PASS */
const generar_pass = (t) => {
let e;
if (1 == t)
for (let a = 0; (e = aleatorio(8)), check_pass(e) != t; a++);
else if (2 == t)
for (let a = 0; (e = aleatorio(12)), check_pass(e) != t; a++);
else for (let a = 0; (e = aleatorio(14)), check_pass(e) != t; a++);
return e;
},
aleatorio = (t) => {
let e,
a =
"abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789^!$%&|[](){}:;.*+-#@<>~";
const r = () => (
(e = (() => {
let e = "";
for (var r = 0, l = a.length; r < t; ++r)
e += a.charAt(Math.floor(Math.random() * l));
return e;
})()),
!!(
e.match(/\W|_/g) &&
e.match(/(\d+)/g) &&
e.match(/[a-z]/g) &&
e.match(/[A-Z]/g)
) && e
);
for (let t = 0; !r(); t++);
return e;
},
check_pass = (t) => {
let e,
a = [
t.match(/\W|_/g).length,
t.match(/(\d+)/g).length,
t.match(/[a-z]/g).length,
t.match(/[A-Z]/g).length,
];
for (let t = 0; t < a.length; t++) {
let r = a[t];
if (((e = ""), 1 == r)) {
e = 1;
break;
}
if (2 == r) {
e = 2;
break;
}
e = 3;
}
return e;
};
</script>
</body>
</html>

Pos: 1

Val: 3.506

Eliminar todos los caracteres no ASCII de una cadena

JavaScript

(1)

Publicado el 27 de Junio del 2021 por Joel (150 códigos)

13.540 visualizaciones desde el 27 de Junio del 2021

Función que mediante el comando replace(), eliminar todos los caracteres de una cadena que no sean ASCII.

editor_code'>removeNonASCII("la cáàasa azuúl"); // "la casa azul"
removeNonASCII("láàäéèñÑa"); // "la"

Pos: 3

Val: 2.288

Permutaciones de un array

JavaScript

Publicado el 26 de Junio del 2021 por Katas (200 códigos)

14.828 visualizaciones desde el 26 de Junio del 2021

Genera todas las permutaciones de los elementos de una matriz (contiene duplicados).

Usa la recursividad. Para cada elemento de la matriz dada, cree todas las permutaciones parciales para el resto de sus elementos. Use Array.prototype.map() para combinar el elemento con cada permutación parcial, luego Array.prototype.reduce() para combinar todas las permutaciones en una matriz. Los casos base son para una longitud de matriz igual a 2 o 1.

ADVERTENCIA: El tiempo de ejecución de esta función aumenta exponencialmente con cada elemento de la matriz. Cualquier cantidad de más de 8 a 10 entradas hará que su navegador se cuelgue mientras intenta resolver todas las diferentes combinaciones.

editor_code'>permutations([1, 2, 3]); // [1, 2, 3], [1, 3, 2], [2, 1, 3], [2, 3, 1], [3, 1, 2], [3, 2, 1]
permutations(["a", "b", "c"]); // ["a", "b", "c"], ["a", "c", "b"], ["b", "a", "c"], ["b", "c", "a"], ["c", "a", "b"], ["c", "b", "a"]

1...Anterior12 3 4 5 6 7 8 9 10 11 Siguiente ...53