Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » JavaScript » Problemas creando mi editor HTML - WYSIWYG

JavaScript - Problemas creando mi editor HTML - WYSIWYG

Volver
Nuevo Tema
<<>>
 
Vista:

Problemas creando mi editor HTML - WYSIWYG

Publicado por Jadni (1 intervención) el 27/09/2007 18:08:04
Bueno, les explico mis primeras pruebas para construir un editor visual de html y dónde me he "atascado".

En primer lugar está la página blank.html, que es donde se escribirá:

Código HTML:

1
2
3
4
5
<html>
<head><title></title></head>
<body contenteditable onLoad="document.designMode = 'on'">
</body>
</html>


Y luego la página editor.html, que contiene el script del editor:

Código HTML:

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
<iframe src="blank.html" id="areaEditable" style="width:500px; height: 300px; border-style:inset; border-width:thin;" frameborder="0px"></iframe><br>
<input type="button" value="Ver contenido" onClick="javascript:alert( verContenido() );" />
<input type="button" value="Ver selección" onClick="javascript:alert( verSeleccion() );" />
 
<script language="JavaScript" type="text/JavaScript">
 
	function verContenido() {
		//Para IExplorer

		if (window["areaEditable"]){
			return window["areaEditable"].document.body.innerHTML;
		//Para Mozilla

		}else{
			return document.getElementById("areaEditable").contentWindow.document.body.innerHTML;
		}
	}
 
	function verSeleccion(){
		//Para IExplorer

		if(typeof document.selection != 'undefined' && document.selection) {
			return window["areaEditable"].document.selection.createRange().text;
		}
		//Para Mozilla

		else if(document.getElementById("areaEditable").selectionStart != 'undefined'){
			var start = document.getElementById("areaEditable").selectionStart;
			var end = document.getElementById("areaEditable").selectionEnd;
			return document.getElementById("areaEditable").substring(start, end);
		}
	}
 
</script>


Si prueban el código en IExplorer y en Mozilla, verán que el primer botón sirve para mostrar todo el texto que se haya escrito, eso funciona bien.

El problema está en el segundo botón, que en IExplorer muestra el texto seleccionado por el usuario, pero en Mozilla no logro hacerlo funcionar...seguro que se trata de una tontería, ¿alguna solución?
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder

Problemas creando mi editor HTML - WYSIWYG

Publicado por Lavall (1 intervención) el 13/01/2013 19:45:31
Mira a ver si es esto lo que quieres


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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
 
 
 
  <meta name="tipo_contenido" content="text/html;" http-equiv="content-type" charset="utf-8">
 
<title>editor</title>
<style>
input{
border:1px solid #000; 

background:#CCCCCC; 

font-family:Arial;
font-size:9px;
margin-bottom:3px;
}
</style>
<script>
var editor;
function $(id){
    return document.getElementById(id);
}
function formato(f){
    editor.execCommand(f, false, null);
}
function rev(t)    {
    return t.split("<").join("&lt;").split(">").join("&gt;").split("\"").join("&quot;");
} 

function insertarEnlace(){ 

    var u; 

    if(!(u=prompt('ingresar url','http://')))return; 

    editor.execCommand("CreateLink",false,u);
} 

function insertarImagen(){ 

    var u; 

    if(!(u=prompt('ingresar url','http://')))return; 

    editor.body.focus(); 

    editor.execCommand("InsertImage",false,u);
} 

function color(c){ 

    editor.execCommand("forecolor",false,c);
} 



function colorFondo(c){ 

    var h=window.ActiveXObject?'backcolor':'hilitecolor'; 

    editor.execCommand(h,false,c); 

} 

function inHTML(){ 

    var u,u2; 

    if(!(u=prompt('ingresar html','')))return; 

     

        try{ 

            editor.execCommand("inserthtml",false,u);
        }catch(e){ 

            try{ 

                editor.body.focus(); 

                u2=editor.selection.createRange(); 

                u2.pasteHTML(u); 

            }catch(E){ 

                alert('nop'); 

            } 

        } 

} 



function htmlOEditor(e){ 

e=e || window.event; 

ob=e.target || e.srcElement 

$('edit').style.display=(ob.value=='html')?'none':'block'; 

$('ht').style.display=(ob.value!='html')?'none':'block'; 

$('ht').innerHTML=rev(editor.body.innerHTML); 

ob.value=(ob.value=='html')?'editor':'html'; 

} 

window.onload=function(){ 

     

    editor=$('edit').contentDocument || $('edit').contentWindow.document; 

    editor.designMode='on'; 

} 

function verSeleccion(){ 

//Para IExplorer 

if(typeof document.selection != 'undefined' && document.selection) { 

return window["edit"].document.selection.createRange().text;
} 

//Para Mozilla 

else if(document.getElementById("edit").selectionStart != 'undefined'){
var start = document.getElementById("edit").selectionStart;
var end = document.getElementById("edit").selectionEnd;
return document.getElementById("edit").substring(start, end);
} 

} 

</script>   

</head> 



<body> 

<form id="form1" name="form1" method="post" action="">
  <input type="button" name="Submit" value="N" onclick="formato('bold')" />
  <input type="button" name="Submit2" value="C" onclick="formato('italic')" />
  <input type="button" name="Submit3" value="S" onclick="formato('underline')" />
  <input type="button" name="Submit4" value="remover formato" onclick="formato('RemoveFormat')" />
  <input type="button" name="Submit5" value="link" onclick="insertarEnlace()" />
  <input type="button" name="Submit9" value="quitar link" onclick="formato('Unlink')" />
  <input type="button" name="Submit6" value="imagen" onclick="insertarImagen()" />
  <input type="button" name="Submit7" value="texto rojo" onclick="color('#FF0000')" /> 

  <input type="button" name="Submit8" value="fondo rojo" onclick="colorFondo('#FF0000')" />
    <input type="button" name="Submit10" value="deshacer" onclick="formato('undo')" />
  <input type="button" name="Submit11" value="rehacer" onclick="formato('redo')" />
 
  <input type="button" name="Submit12" value="insertar html" onclick="inHTML()" />
  <br />
<iframe id="edit" width="100%" height="300" style=" border:1px solid #000;"></iframe>
<div id="ht" style="width:100%; height:300px; overflow:auto; border:1px solid #000; display:none"></div>
<div style="margin-top:3px;"><input name="ver" type="button" id="ver" onclick="htmlOEditor(event)" value="Contenido html" /><br>
<input type="button" value="Ver selección" onClick="javascript:alert( verSeleccion() );" />
 
 
</div>
</form>
</body>
</html>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar