Código de JavaScript - Crear un editor WYSIWYG

Imágen de perfil
Val: 3.214
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Crear un editor WYSIWYGgráfica de visualizaciones


JavaScript

Publicado el 21 de Septiembre del 2015 por Xve (294 códigos)
4.679 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.

Versión 1
estrellaestrellaestrellaestrellaestrella(1)

Publicado el 21 de Septiembre del 2015gráfica de visualizaciones de la versión: Versión 1
4.680 visualizaciones desde el 21 de Septiembre del 2015
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<script>
		function iFrameOn(){
			window.frames['rte'].document.designMode = 'On';
		}
		function iBold(){
			window.frames['rte'].document.execCommand('bold', false, null);
		}
		function iUnderline(){
			window.frames['rte'].document.execCommand('underline', false, null);
		}
		function iItalic(){
			window.frames['rte'].document.execCommand('italic', false, null);
		}
		function iFontSize(){
			var size = prompt('Indica un tamaño entre 1 y 7', '');
			window.frames['rte'].document.execCommand('fontSize', false, size);
		}
		function readFrame(){
			alert(window.frames['rte'].document.body.innerHTML);
		}
	</script>
 
	<style>
	iframe {border:#888 1px solid;width:400px;height:200px;}
	</style>
</head>
 
<body onLoad="iFrameOn();">
 
<form name="miForm">
	<input type="button" onclick="iBold()" value="B">
	<input type="button" onclick="iUnderline()" value="U">
	<input type="button" onclick="iItalic()" value="I">
	<input type="button" onClick="iFontSize()" value="Tamaño de la fuente">
	<p>
		<iframe name="rte" id="rte"></iframe>
	<p>
</form>
<input type="button" onclick="readFrame()" value="Mostrar código HTML">
 
</body>
</html>



Comentarios sobre la versión: Versión 1 (1)

Imágen de perfil
22 de Mayo del 2017
estrellaestrellaestrellaestrellaestrella
¡O.K.!
Responder

Comentar la versión: Versión 1

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios...
CerrarCerrar
CerrarCerrar
Cerrar

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

Puedes registrarte o validarte desde aquí.

Codigo
Negrita
Subrayado
Tachado
Cursiva
Insertar enlace
Imagen externa
Emoticon
Tabular
Centrar
Titulo
Linea
Disminuir
Aumentar
Vista preliminar
sonreir
dientes
lengua
guiño
enfadado
confundido
llorar
avergonzado
sorprendido
triste
sol
estrella
jarra
camara
taza de cafe
email
beso
bombilla
amor
mal
bien
Es necesario revisar y aceptar las políticas de privacidad

http://lwp-l.com/s3283