Como crear un editor de texto?

Citar

Escrito el 30 Jul 2011 02:49 pm

Holas.

Quiero crear un editor de texto para mi web, lo que quiero exactamente es:

Dos campos de texto, uno llamado 'resultado final' y otro que llamaré 'html' o 'bbcode', y que los dos campos de texto se puedan modificar.

Ejemplo: Los dos campos de texto tienen el mismo texto. Si en el campo 'resultado final' selecciono una palabra y le doy a un botón llamado 'negrita', que el texto que he seccionado en el campo 'resultado final' se ponga en negrita y en el campo 'html' se meta entre etiquetas '<b>texto seleccionado</b>', y que también funcione al inteves, es decir, si en el campo 'Html' pongo algo entre <b> y </b> en el de 'resultado final' se vea en negrita.

He creado uno usando Javascript con un iframe en modo 'designmode' y usando la función 'execcomand', el problema es que hay algunas cosas que no me deja hacer, ya que está como 'prediseñado'.

Resumiendo, las preguntas son:
1. Cual es el mejor lenguaje para hacer esto? Javascript, ajax, o otro?
2. En ese lenguaje, como se llaman mas o menos las funciones (Para poder empezar a buscar en google algo) que permitan seleccionar un trozo de texto de un campo de texto y remplazarlo por ejemplo por '<b>Texto seleccionado</b>' o por '[negrita]Texto seleccionado[/negrita]'?
3.Como hacer para que si en un campo de texto tengo por ejemplo '[negrita]Texto seleccionado[/negrita]' en el otro automáticamente aparezca 'Texto seleccionado' en negrita

Ya sé que son muchas preguntas y son muy largas de contestar, NO QUIERO QUE LAS CONTESTEN AL PIE DE LA LETRA, solo quiero algunos enlaces de internet o palabras clave para empezar a buscar por google, ya que no sé por donde empezar, y si busco 'editor de texto web' me sale todo prediseñado.

Gracias !

Por netkuup

31 de clabLevel

Envíale un mensaje privado

Citar

Escrito el 26 Ago 2011 09:14 pm

aa si yo hice uno algun tiempo. te dejo lo que tenia en mi script

. si lo mejoras me avisas no tengo tiempo para poder mejorarlo estoy en otros asuntos

.. si lo mejoras me dices para que tenga la actualizacion

.

<html>
<head>
<title>Editor bbCode</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script>
function instag(tag){
var input = document.form1.contenido;
if(typeof document.selection != 'undefined' && document.selection) {
var str = document.selection.createRange().text;
input.focus();
var sel = document.selection.createRange();
sel.text = "[" + tag + "]" + str + "[/" +tag+ "]";
sel.select();
return;
}else if(typeof input.selectionStart != 'undefined'){
var start = input.selectionStart;
var end = input.selectionEnd;
var insText = input.value.substring(start, end);
input.value = input.value.substr(0, start) + '['+tag+']' + insText + '[/'+tag+']'+ input.value.substr(end);
input.focus();
input.setSelectionRange(start+2+tag.length+insText.length+3+tag.length,start+2+tag.length+insText.length+3+tag.length);
return;
}else{
input.value+=' ['+tag+']Reemplace este texto[/'+tag+']';
return;
}
}
function inslink(){
var input = document.form1.contenido;
if(typeof document.selection != 'undefined' && document.selection) {
var str = document.selection.createRange().text;
input.focus();
var my_link = prompt("Enter URL:","http://");
if (my_link != null) {
if(str.length==0){
str=my_link;
}
var sel = document.selection.createRange();
sel.text = "[a href=\"" + my_link + "\"]" + str + "[/a]";
sel.select();
}
return;
}else if(typeof input.selectionStart != 'undefined'){
var start = input.selectionStart;
var end = input.selectionEnd;
var insText = input.value.substring(start, end);
var my_link = prompt("Enter URL:","http://");
if (my_link != null) {
if(insText.length==0){
insText=my_link;
}
input.value = input.value.substr(0, start) +"[a href=\"" + my_link +"\"]" + insText + "[/a]"+ input.value.substr(end);
input.focus();
input.setSelectionRange(start+11+my_link.length+insText.length+4,start+11+my_link.length+insText.length+4);
}
return;
}else{
var my_link = prompt("Ingresar URL:","http://");
var my_text = prompt("Ingresar el texto del link:","");
input.value+=" [a href=\"" + my_link + "\"]" + my_text + "[/a]";
return;
}
}
</script>
</head>

<body>
<form name="form1" method="post" action="">
<input type="button" name="Submit" value="B" onClick="instag('b')">
<input type="button" name="Submit3" value="U" onClick="instag('u')">
<input type="button" name="Submit4" value=" I " onClick="instag('i')">
<input type="button" name="Submit2" value="LINK" onClick="inslink()">
<br>
<textarea name="contenido" cols="40" rows="10" id="contenido"></textarea>

</form>
</body>
</html>

Por RZ

Claber

118 de clabLevel

Genero:Masculino

Envíale un mensaje privado

Como crear un editor de texto?

Escribe una respuesta rapida